【Vue2】生命周期

上图的理解：

1. 初始化生命周期、事件
2. • beforeCreate（无法访问data和methods的东西）
3. 初始化数据监听、数据代理
4. • created（可以访问data和methods的东西）
5. 判断Vue({ })里面有没有写el:‘xxx’
6. 如果没有，执行了Vue（{}） 外面的 vm.$mount(el) 【里面没有el，就在外面找】
7. 判断Vue（{}）里面是否有模板template:‘xxx’
8. 如果没有：编译el的外部html作为模板template，也就是一整个 <div id="root"> ...</div>；如果有： 编译模板template 到render函数（负责渲染的函数）
9. 【此时Vue开始解析模板，在内存中生成虚拟DOM，页面还不能显示解析好的内容，还是{{xxx}}】
10. • beforeMount（页面呈现的是还未经Vue编译的DOM结构，所有对DOM的操作都无效）
11. 创建vm.$el 替代el（存一下真实DOM（方便以后复用），然后将内存中的虚拟DOM 转为真实DOM插入页面中）
12. • mounted（页面呈现经Vue编译的DOM，对DOM操作均有效（尽可能避免在此时操作DOM），一般在这里进行初始化操作，如开启定时器、订阅消息、网络请求、绑定自定义事件等）
13. 当data数据发生变化
14. • beforeUpdate（此时，数据是新的但页面是旧的，即页面和数据尚未保持同步）
15. 根据新数据生成虚拟DOM，和旧的虚拟DOM比较，重新渲染，完成页面更新，即完成model到view的更新
16. • updated（此时数据是新的，页面也是新的，即页面和数据保持同步）
17. 当vm.$destroy() 调用时
18. • beforeDestroy（此时，vm中所有data、methods、指令等都处于可用状态，但马上要执行销毁过程，一般此阶段进行关闭定时器、取消订阅消息、解绑自定义事件等）
19. 关闭子监视属性、组件、事件监听器
20. • destroyed（销毁完成（用的少））

其中常用的两个生命周期钩子函数是mounted和beforeDestroy，在mounted中可以发送Ajax请求/启动定时器/绑定自定义事件/订阅消息等(初始化操作)；beforeDestroy中可以清除定时器/解绑自定义事件/取消消息订阅等(收尾工作)。

---

这些就是对生命周期的概况，总结如有不足请在评论区补充