前言
每个vue的实例都有一个完成的生命周期,从创建、初始化数据、编译模板等等...直到销毁的过程称为vue的生命周期,简单说就是从创建到最后销毁的过程。
一、生命周期的过程?
1.人的生命周期
2.vue的生命周期
二、钩子函数
1.分类:四大阶段八个方法
阶段 | 方法名 | 方法名 |
初始化 | beforeCreate | Create |
挂载 | beforeMount | Mounted |
更新 | beforeUpdate | Updated |
销毁 | beforeDestroy | Destroyed |
初始化阶段流程图:
beforeCreate(): new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
Created(): 真实DOM挂载之前,使用场景用于网络请求和注册全局事件
挂载截图流程图:
beforeMount():真实DOM挂载之前,预处理data,不会执行updataed钩子函数
Mount():真实DOM挂载以后
更新阶段流程图:
beforeUpdate():更新的前提是data里面的数据改变才会执行
Update():更新之后,获得更新后的真是dom
销毁阶段流程图:
beforeDestroy():
使用前提:v-if="false",销毁Vue实例
使用场景:移除全局事件,移除当前组件,计时器,定时器,eventBus移除事件$off方法
补充一对钩子函数:
activated – 激活时触发
deactivated – 失去激活状态触发