对于vue生命周期钩子的粗浅理解

vue实例的生命周期的三个阶段

• 创建阶段： 对应 beforeCreate, created, beforeMount, mounted
• 运行阶段： 对应 beforeUpdate, updated
• 销毁阶段：对应 beforeDestory, destoryed

---

详细解释

1. 调用new Vue() 方法,开始创建vue实例。在beforeCreate调用时，vue对象上仅有默认的一些生命周期函数和事件，此时data和methods都未初始化。
2. 在created调用时，data和mehtods已经初始化完毕，所以此时可以调用methods中的方法和使用data中的数据。

• 之后vue开始编辑模板，生成一个模板字符串，将其渲染为虚拟DOM，此时vue还未挂载到实际的页面中去。

3. 在beforeMounted调用时，虚拟DOM已经生成，但并未挂载到页面中。
4. 在mounted调用时，虚拟DOM已经替换到真实的页面中去，此时可以操作页面上的DOM结点了，只要mounted执行完毕，vue的实例就已经创建完毕，之后进入到运行阶段。

• 运行阶段的两个钩子函数会根据data数据的改变有选择性地触发0次或者多次。

5. 当vue监测到data数据变化时，就会触发beforeUpdate事件，此时最新的数据还未被同步到页面中去，所以此时页面中的数据还是旧的。

• 然后vue 根据最新的data重新渲染虚拟DOM，再将生成的DOM树替换到实际的页面中去。

6. 在updated事件执行时，页面和数据已经完成同步，此时页面呈现的就是最新数据。
7. 当执行beforeDestory钩子函数时，vue实例就进入销毁阶段，此时实例上的数据，方法以及指令等等都还可用，还没有执行销毁过程（注：页面的主动刷新并不会执行destory）。
8. 当destory执行时，组件已经被完全销毁了（所有指令解绑，事件监听移除，子实例被销毁），此时实例的数据方法和子实例都不可用了。

---

此外，还有activated和disactivated分别在组件被keep-alive激活和停用时调用。