vue3语法糖 生命周期

在Vue3中，setup语法糖直接代替了beforeCreate和created钩子函数，destroy钩子函数更名为unmount。其他钩子函数都加上了"on"前缀。具体的生命周期钩子函数如下：
- beforeCreate -> 使用setup()
- created -> 使用setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured

同时，Vue3中还新增了几个钩子函数：
- onRenderTracked: 用于跟踪页面上所有响应式变量和方法的状态
- onRenderTriggered: 用于查找程序的问题所在

以下是一些示例代码，展示了如何使用Vue3的生命周期钩子函数：

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(() => {
  console.log('组件卸载前')
})

onUnmounted(() => {
  console.log('组件卸载后')
})

onErrorCaptured((error) => {
  console.error('捕获到错误', error)
})

onRenderTracked((event) => {
  console.log('跟踪', event)
})

onRenderTriggered((event) => {
  console.log('定位变化的', event)
})