Vue3生命周期函数与vue2的对比:
Vue3的setup语法糖直接代替beforeCreate,Created;Destroy更名为Unmount;其他就是直接加on
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount dom元素在内存中,还未渲染到页面(不可操作dom)
- mounted -> onMounted dom已经渲染到页面,能操作dom了
- beforeUpdate -> onBeforeUpdate 数据更改后,页面还未渲染
- updated -> onUpdated 数据更改后,页面渲染完成
- beforeDestroy -> onBeforeUnmount 组件销毁之前
- destroyed -> onUnmounted 组件销毁之后
- errorCaptured -> onErrorCaptured (当事件处理程序或生命周期钩子抛出错误时调用)
-
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered} from "vue" onBeforeMount(()=>{ console.log('内存中有dom,还未渲染,还不能操作dom') }) onMounted(()=>{ console.log('dom结构已渲染到页面,可以操作dom啦') }) onBeforeUpdate(()=>{ console.log('数据变化后,页面还未渲染') }) onUpdated(()=>{ console.log('数据变化后,页面已经渲染') }) onBeforeUnmount(()=>{ //组件的v-if可控制组件卸载 console.log('组件卸载前') }) onUnmounted(()=>{ console.log('组件卸载后') })
新增的钩子函数:
- onRenderTracked
- onRenderTriggered
onRenderTracked直译过来就是状态跟踪,它会跟踪页面上所有响应式变量和方法的状态,也就是我们用return返回去的值,它都会跟踪。只要页面有update的情况,它就会跟踪,然后生成一个event对象,我们通过event对象来查找程序的问题所在。
onRenderTriggered直译过来是状态触发,它不会跟踪每一个值,而是给你变化值的信息
onRenderTracked((e)=>{
console.log('跟踪',e)
})
//调试钩子函数:onRenderTracked,onRenderTriggered
onRenderTriggered((e)=>{
console.log('定位变化的',e)//参数能取到变化的属性信息
})