Vue3生命周期函数

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)//参数能取到变化的属性信息
})