1.初始化
new Vue()后 | 初始化:生命周期、事件,但数据代理未开始 |
---|---|
beforeCreate | 此时,无法通过vm访问data中的数据及methods中的方法 |
Observe Data|Init Events | 初始化:数据监测和数据代理 |
created | 此时,可以通过vm访问data中的数据及methods中的方法 |
解析模板(template、el) | 此阶段Vue开始解析模板,生成虚拟DOM(内存中),页面还不能显示解析好的内容 |
beforeMount | 1.页面呈现未经vue编译的DOM结构 2.所有对DOM的操作都不生效 |
Create vm.$el and replace ‘el’ with it | 将内存中的虚拟DOM转化成真实的DOM插入页面 |
mounted | 1.页面呈现的是经过vue编译的DOM结构 2.对DOM的操作均有效(尽可能避免),初始化完成 |
2. 数据更新
beforeUpdate | 数据是最新的,但页面是旧的,页面尚未和数据保持同步 |
---|---|
Virtual DOM re-render and patch | 根据新数据生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新,即完成Model->View的更新 |
updated | 数据和页面都是最新的,页面和数据保持同步 |
3.销毁
beforeDestory | VM中的data、methods、指令等都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作 |
---|---|
关闭watcher、子组件和事件监听 | |
destroyed | 组件销毁 |