一、前言
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:一般不操作此函数