Vue生命周期

Vue生命周期

Init Event&lifecycle初始化事件和生命周期（没有数据代理）
beforeCreate 此时无法通过vm访问到data中的数据，和methods中的方法（因为没有数据代理）
__Init injection&reactivity__初始化数据代理和数据监测
created 此时可以通过vm访问到data中的数据，和methods中的方法（因为有了数据代理）

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

beforeMount 此时页面呈现的是未经和Vue编译的DOM 结构，对DOM的所有操作，最终都不奏效
Create vm.$el and replace “el” with it 此时vm.$el中存了一个真实DOM，这一步 将内存中的虚拟DOM转为真实的DOM插入页面
mounted 此时页面中呈现的是经过Vue编译的DOM，此时对DOM的操作均有效（但是尽可量避免），至此初始化过程结束，一般再此进行，开启定时器，发送网络请求，订阅消息，绑定自定义事件，初始化等操作
Mounted When data changes 进行 beforeUpdate
beforeUpdate 此时，数据是新的，但是页面是旧的，即页面尚未和数据保持同步
__Virtual DOM re-render and patch__根据新数据生成的虚拟DOM，随后与旧的虚拟DOM比较，最终完成页面更新，即完成Model->View的更新
updated 此时，数据是新的，页面也是新的，即数据和页面是同步的
when vm.$destory() is called
beforeDestory
Teardown watchers,child Components and event listeners 拆除监听，拆除子组件和事件监听器
Destroyed
destroyed vm销毁，但工作成果还在，完全销毁一个实例，清理它与其他实例的连接，解绑它的全部指令及事件监听器，解绑的事件是自定义事件而非DOM事件
以下给出Vue官网生命周期图示
Vue生命周期图示