【vue2】生命周期函数总结

一、前言

vue的生命周期共有八个函数，进一步说有四对。分别完成vue实例在创建到销毁的过程中的操作。

生命周期函数表

将要创建	调用beforeCreate函数
创建完毕	调用created函数
将要挂载	调用beforeMount
挂载完毕（重要）	调用mounted函数
将要更新	调用beforeUpdate
更新完毕	调用updated
将要摧毁（重要）	调用beforeDestroy
摧毁完毕	调用destroyed

二、创建

……初始化：生命周期、事件、但数据代理还未开始……

beforeCreate：此时无法通过vm访问到data中的数据、methods中的方法

……初始化：数据监测、数据代理……

created：可以通过vm访问到data中的数据、methods中的方法

……vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容……

三、挂载

beforeMount：页面呈现的是未经vue编译的DOM结构，所有对DOM的操作均不奏效

……将内存中的虚拟DOM转为真实DOM插入页面……

mounted：页面呈现的是经过vue编译的DOM，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

四、更新

beforeUpdate：此时数据是新的，但是页面是旧的。即：页面尚未和数据保持同步

……根据新数据，生成新的虚拟DOM，随后与旧的DOM进行比较，最终完成页面更新。即：完成Model-->View的更新……

updated：此时数据是新的，页面也是新的

五、销毁

beforeDestroy：vm中所有的data、methods、指令等都处于可用状态，马上要进行销毁。一般在此阶段进行关闭定时器、取消订阅消息、解除自定义事件等收尾操作

destroyed：一般不操作此函数