VUE的生命周期

135 阅读2分钟

VUE生命周期是指在VUE实例完成一些内容之后,自动调用的一些函数,共有8个(四对),但是在研发过程中最常用的是mounted和beforeDestroy。

beforeCreate()

是在初始化数据监测和数据代理之前,不能通过vm实例来访问到Vue实例中的数据和方法。

created()

在数据监测和数据代理之后,可以通过实例来访问Vue实例中的数据和方法。

beforeMount()

此阶段Vue开始解析模板,生成虚拟Dom(内存中)但是页面显示的未编译的Html结构,对于Dom的多有操作都是不能奏效的。

image.png

mounted()

将内存中的虚拟Dom转为真实Dom但是vm也会包存一份虚拟Dom(vm.$el),在挂载完成之后,尽量减少对Dom的操作,有Vue实例来接管,进行操作。在此部分要进行一些初始化的操作,由Vue实例在挂载完成之后自动调用,例如定时器,Ajax,订阅消息,绑定事件等初始化操作。(里边的具体函数是由程序员决定的)

beforeUpdate()

此函数的调用时Vue实例中的data数据更新后,就会触发这一函数,在此步骤数据已经更新,但是页面是旧的,它会根据新数据,生成新的虚拟Dom,并与旧的虚拟Dom来进行Diff操作,完成Model---View的转换。

updated()

此时数据是新的,页面也是新的。

beforeDestroy()

在此阶段,data,methonds,指令等等,都是可用状态,但是并不会展示在页面上有响应,所以在此阶段最主要的操作是关闭定时器,取消订阅,解绑自定义事件等操作,(因为定时器等操作是Win直接管理的,并不会因为vm的消除而停止)。 在此阶段中,由于Vue是组件化思想,所以一个Vue实例的注销,通常是有其他组件决定。

destroyed()

消除vm。

生命周期.png