Vue生命周期详解

实质

Vue在关键时刻帮我们调用的一些特殊名称的函数。

this指向：vm或者组件实例对象。

可以使用debugger;打断点调试

beforeCreate（将要创建）

创建之前指的是数据监测和数据代理创建之前

生命周期与事件初始化完成，但数据代理还未开始，调用，所以此时无法通过vm访问到data中的数据和methods中方法。

created（创建之后）

数据监测和数据代理初始化完成调用，此时可以通过vm访问到data中的数据和methods中配置的方法。

beforeMount（将要挂载）

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

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

mounted（挂载完毕）重要

此前所有流程都叫做挂载流程

只调用一次。

Vue完成模板的解析，将内存中的虚拟DOM转为真实DOM，把初始的真实DOM元素放入页面后（挂载完毕）调用。

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

template只能有一个根节点

beforeUpdate(将要更新)

更新流程

data有改动时调用，数据是新的，但页面是旧的（页面尚未和数据保持同步）。

updated(更新完毕)

更新流程

根据新数据生成新的DOM树，随后与旧的DOM树进行比较，完成页面的更新（Model—>View的更新）后调用。

此时数据和页面都是新的，页面与数据保持同步

beforeDestroy(将要销毁)重要

销毁流程

vm.$destroy()调用时，完全销毁一个实例，清理与其他实例连接，解绑它的全部指令和自定义事件监听器。触发beforeDestroy钩子

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

对数据进行所有操作都不会再触发更新

destroyed(销毁完毕)

销毁流程

移除所有监视，子组件和事件监听器。

触发destroyed钩子，几乎不用

附加图示总结