版本： Vue2

一、前言

vue生命周期是一组以函数作为选项的配置，这组配置函数Vue实例会在关键的时刻调用，其次函数名是固定的，如果函数名写错，该函数不会执行，控制台也不会报错，最后，生命周期函数中的this指向vue实例。

二、流程图

三、流程解释

new Vue()：创建vue实例，如果不创建，便没有后续的操作可言

实例化vue -- 挂载阶段

init Event & Lifecycle：会初始化一些规则，像周期函数什么名字、怎么使用，何时使用等，但是此时数据代理还没开始，实例vm身上还不存在_data属性，也就不存在拿到data中的数据了

beforeCreate：第一个生命周期函数，因为上面vm上面都不存在_data属性，所以这里无法通过vm访问到data中的数据和methods中的方法

init injections & reactivity: 将数据进行检测和代理

Created：第二个生命周期函数，这里在可以在vm实例上正常拿到data中的数据和访问methods中的方法了

Created之后，beforeMount之前：在这个地方开始编译模板，在内存中生成虚拟的dom，不过此时还不能显示解析好的内容（这其中编译模板的流程跟我在el配置项的文章说的差不多，这里不在赘述）

beforeMount：第三个生命周期函数，页面呈现未经vue编译的Dom结构，此时所有对dom的操作都不奏效

beforeMount之后，mounted之前：此时会将虚拟的dom节点转换为真实的dom节点，并且会将生成的dom节点在vm.$el上面存储一份，这就是为什么可以用Vm.$el访问到挂载完成后的el元素了

Mounted：第四个生命周期函数，此时将vue编译过的dom结构渲染到页面上，此时所有的dom操作都有效，但是在vue中除了自定义指令可以使用dom操作以外其他地方均不推荐，所以此时也表示初始化过程的结束，一般在这里可以开定时器，发送请求，绑定事件等初始化操作

当数据发生改变 -- 更新阶段

beforeUpdate：第五个生命周期函数，当挂载完毕（mounted）之后，只要数据一发生改变就会触发这个函数，在这里，数据是新的，但页面还未来得及更新。

在beforeUpdate之后，Updated之前：这里会根据新的数据生成新的虚拟dom,随后将新的和旧的虚拟dom进行对比，将差异的地方进行渲染，以此完成数据到视图的更新，

Updated：第六个生命周期函数，这里将数据和页面同步，使其变为最新状态。

当vm.$destroy()方法执行 -- 销毁阶段

这个阶段需要注意：

• 销毁完一个实例之后会清理它与其它实例的链接，并且使这个实例所使用的全部的指令失效以及所有的自定义事件失效。

• 销毁实例表示它不再控制以前他所控制的东西，并不是将它以前生成的东西也一起销毁，不然这临死之人拉一群人陪葬，这不直接起飞？？？所以vue不允许这种事情的发生。

• 一旦进入销毁阶段，更改数据虽然会更新，但是并不会重新进入更新阶段，也就是不会触发在beforeUpdate、Updated这两个生命周期函数

beforeDestroy：第七个生命周期函数，此时实例的所有方法、属性都可以使用，一般在此处进行关闭定时器，解绑事件的收尾工作

destoryed：第八个生命周期函数，在真正去世之前，它会把跟它有关的所有监视watch、子组件、以及绑定的所有自定义事件断绝关系，然后驾鹤西游了。