VUE 生命周期

NO

created

beforeMount

updated

Destroyed

Compile templateintorender function *

beforeUpdate

YES

初始化：数据监测、数据代理。

初始化：生命周期、事件、但数据代理未开始。

whenvm.$destroy()is called

此时：无法通过vm访问到data中的数据、methods中的方法。

when vm.$mount(el) is called

将内存中的虚拟DOM转为真实DOM插入页面

new Vue()

1. 页面中呈现的是经过Vue编译的DOM。2. 对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。

此时：可以通过vm访问到data中的数据、methods中的方法。

mounted

Initinjections & reactivity

Virtual DOMre-renderand patch

此阶段Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容。

生成新虚拟DOM，与旧虚拟DOM进行比较，完成页面更新。

when datachanges

Create vm.$eland replace\"el\" with it

Mounted

1. 页面呈现的是未经Vue编译的DOM结构。2. 所有对DOM的操作，最终都不奏效。

此时数据是新的，页面也是新的，页面和数据保持同步。

此时数据是新的，页面是旧的，页面没有和数据保持同步。

Has\"template\" option

destroyed

Has\"el\" option

Compile el'souterHTMLas template *

beforeCreate

beforeDestroy

InitEvents & Lifecycle