Vue生命周期函数
生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为四个阶段,创建阶段,挂载阶段,更新阶段,销毁阶段分别有:
实例创建前:beforeCreate()
只有一些实例本身的事件和生命周期函数
实例创建后:Created()
最早使用data和methods中数据的钩子函数
组件挂载前:beforeMount()
指令已经解析完毕,内存中已经生成dom树
组件挂载后:Mounted()
dom渲染完毕页面和内存的数据已经同步
视图更新前:beforeUpdate()
当data的数据发生改变会执行这个钩子,内存中的数据是新的,页面是旧的
视图更新后:Updated()
内存和页面都是新的
实例销毁前:beforeDestroy()
即将销毁data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作
实例销毁后:Destroyed()
已经销毁完毕
补充:
errorCaptured()
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
activated()
被 keep-alive 缓存的组件激活时调用。
deactivated()
被 keep-alive 缓存的组件停用时调用。
Vue2和Vue3生命周期有一些区别:
1.beforeCreate -> setup()
开始创建组件之前,创建的是data和method
2.created -> setup()
3.beforeMount -> onBeforeMount
组件挂载到节点上之前执行的函数。
4.mounted -> onMounted
组件挂载完成后执行的函数
5.beforeUpdate -> onBeforeUpdate
组件更新之前执行的函数。
6.updated -> onUpdated
组件更新完成之后执行的函数。
7.beforeDestroy -> onBeforeUnmount
组件挂载到节点上之前执行的函数。
8.destroyed -> onUnmounted
组件卸载之前执行的函数。
9.activated -> onActivated
组件卸载完成后执行的函数