一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
我要一步一步往上爬~大家好，我是努力不浪费每分每秒热爱生活的小朋友，今天我们来一起学习一下Vue的更新和销毁流程，并对生命周期做个小总结。
1. 当data改变时
-->钩子函数beforeUpdate
新数据渲染之前，此时，数据已经更新了，但是页面是旧的，还没来得及更新，此生命周期钩子中，页面和数据尚未保持同步。
-->重新生成虚拟DOM：本次的虚拟DOM和上次已经渲染完成的DOM比较，找出区别（深度优先原则）生成补丁包（dom diff），补丁包生成真实DOM，重新渲染页面，完成页面的更新,实现了模型Model到视图View的更新。
挂载时是Model到View的初次渲染，现在是更新.
-->钩子函数updated
新数据渲染之后，此时数据和页面都是最新的，数据和页面保持一致了。注意此时修改响应数据会导致死循环！
2. 销毁流程
--> vm.destroy()`可以完全销毁一个vm实例，清理它和其他实例之间的连接，解绑vm的全部指令以及事件（自定义事件）监听器。
-->钩子函数beforeDestroy
此时，vm中所有的data和methods都处于可用的状态，马上要执行销毁过程了，此时一般会执行关闭定时器、取消订阅、解除绑定等收尾操作。
--> Teardown watchers,child components and event listeners。销毁监视、子组件、自定义事件监听器
-->钩子函数destroyed：销毁之后
3. 声明周期总结
- 一共有四对生命周期函数
- vm的一生:
- 将要创建==>调用beforeCreate函数
- 创建完毕==>调用created函数
- 将要挂载==>调用beforeMount函数
- 挂载完毕==>调用mounted函数(初始化工作:开启定时器、发送网络请求、绑定自定义事件、订阅消息...)
- 将要更新==>调用beforeUpdate函数
- 更新完毕==>调用updated函数
- 将要销毁==>调用beforeDestroy函数(收尾工作:关闭定时器、取消订阅...)
- 销毁完毕==>调用destroyed函数
所以常用的生命周期钩子有
mounted和beforeDestroy两个
- 销毁vue实例
- 销毁后，借助浏览器的vue开发者工具看不到任何信息
- 销毁后自定义事件会消失，但是原生DOM事件依然有效
- 在beforeDestroy函数中，一般不会操作数据，因为即使操作了数据，也不会触发在它之前的Update流程.
