Vue3.x 版本的生命周期钩子函数

setup()    开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method

//必须先引用再使用
import {onBeforeMount,onMounted,onUpdated,onBeforeUnmoun,onUnmounted} from 'vue'


//组件挂载到节点上之前执行的函数
onBeforeMount() 
 
//组件挂载完成后执行的函数    
onMounted() 

//组件更新之前执行  
onBeforeUpdate()

//组件更新之后执行      
onUpdated()      

//在组件卸载之前
onBeforeUnmount()   vue2

//组件销毁之后执行
onUnmounted()

 

被包含在中的组件，会多出两个生命周期钩子函数。

//被激活时执行
onActivated()  

//比如从 A 组件，切换到 B 组件，A 组件消失时执行
onDeactivated()

//当捕获一个来自子孙组件的异常时激活钩子函数
onErrorCaptured()

Vue2 和 Vue3 的对比

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

调试之用？！

//状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在
onRenderTracked()

//状态触发,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来
onRenderTriggered()