这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

生命周期

以下的生命周期如果你需要测试的话,记得在后面打断点,不然的话测试结果不准.

此时数据代理还没开始，访问不到vue实例上的data和methods

befroreCreate-created:数据监测和数据代理创建完毕

此时可以通过vm访问到data中的数据以及getter,setter，methods中配置的方法。

created-beforeMount:这个阶段Vue开始解析模板查找是否有el选项和template选项，还有那些@click,插值语法,计算属性之类的，然后在内存中生成虚拟dom,页面还不能显示解析好的内容，因为还没变成真实dom。

此时页面呈现的是未经Vue编译的DOM结构。可以看到@click和插值语法没有被编译成真实dom.
所有修改DOM的操作最终都不奏效:这里的最终是指挂载真实DOM的时候, 因为在挂载前, 会将挂载前解析模板生成的虚拟DOM变成真实DOM, 因此在beforeMount进行的DOM操作都是无效的, 因为真实DOM是基于beforeMount之前生成的.

beforeMount-mouted:将beforeMount前解析模板生成的内存中的虚拟DOM转换为真实DOM插入页面，真实dom还在$el上存了一份,主要是为了后期diff算法对比复用

此时初始化过程结束, ::一般在这个地方进行以下操作: 开启定时器, 发送网络请求, 订阅消息, 绑定自定义事件, 等初始化操作::

Vue完成模板解析并把真实的DOM元素放入页面后调用mounted,完成挂载

对象简写形式{a:a}简写为{a}
代表挂载完毕
- Vue把代码变虚拟DOM-转换成真实DOM-把初始的真实的DOM元素挂载到页面上。为什么说初始因为后续比如v-if也会重新渲染模板，但是此时不会再执行mouted了，mouted就执行一次
mounted的this指向就是vm,

更新

当data的数据改变的时候, 调用beforeUpdate, 但是有一点需要注意, 就是此时仅仅是data改变, 但是DOM却还没有更新, 也就说此时的数据和页面不是同步的

beforeUpdata-updated : 根据新的数据生成新的虚拟DOM, 随后和旧的虚拟DOM进行比较, 最终完成更新. 也就是: Model-View的更新

此时数据是新的, 页面也是新的, 数据和页面保持同步了

要进行销毁流程有一个前提, 就是vm.$destroy() , 完全销毁一个实例也就是组件, 清理他和其他实例(组件)之间的关系, 解绑他的全部指令和自定义事件监听器(如果你绑的原生dom事件就还可以继续执行).Vue官方说最好用v-if和v-for控制组件生命

此时vm中data, methods, 执行等都处于可用状态, 但是此时对数据的更改不会再触发更新了,没有回头路了.马上要进行销毁. 这时候做的一般就是收尾工作,一般在这个阶段:关闭定时器, 取消订阅消息, 解绑自定义事件等收尾操作.

beforeDestory-destroyed: 解除监听, 和子组件的关系, 事件监听器

总结

数据监测数据代理创建前/后, Vue编译的DOM挂载前/后, 数据更新前/后, 当前组件实例销毁前/销毁后