生命周期

流程图

Vue2生命周期

分析

初始化显示

beforeCreate()：初始化生命周期、事件，但数据代理还未开始。此时，无法通过 vm 访问 data 中数据、methods 中方法。

created()：初始化数据监测、数据代理。此时，可以通过 vm 访问到 data 中的数据、methods 中方法。

beforeMount()：页面呈现的是未经 Vue 编译的 DOM 结构，所有对 DOM 的操作不奏效。

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

更新状态

当 data 中监听的数据变化时，this.xxx = value

beforeUpdate()：此时，数据是新的但页面时旧的，即页面尚未和数据保持同步。

中场：根据新数据，生成新的虚拟 DOM，随后与旧的虚拟 DOM 进行比较，最终完成页面更新，完成了 Model→View 的更新。

updated()：此时数据和页面都是最新的，页面和数据同步。

销毁实例

beforeDestroy()：此时，vm 中所有的 data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。

常用周期

1.mounted(): 发送 ajax 请求, 启动定时器等异步任务，绑定自定义事件

2.beforeDestroy(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息

3.销毁 Vue 实例：

销毁后期借助 Vue-dev 工具看不到任何信息。

销毁后自定义事件会失效，但原生 DOM 事件依然有效。

一般不会在 beforeDestroy 操作数据，因为即便更新数据也无法更新。