在 Vue3 中，生命周期钩子函数有所改变。以下是 Vue3 中的生命周期钩子函数及其作用：
-
beforeCreate：在实例被创建之前执行，此时 data、methods、computed 和 watch 等属性都还未初始化。
-
created：在实例创建完成后执行，此时 data、methods、computed 和 watch 等属性已经被初始化，可以在这个钩子函数中访问和修改这些属性。
-
beforeMount：在挂载开始之前执行，此时模板编译已经完成，但尚未将生成的 DOM 挂载到页面中。
-
mounted：在挂载完成后执行，此时组件已经被渲染到页面中，可以在这个钩子函数中访问组件的 DOM 元素。
-
beforeUpdate：在组件更新之前执行，此时数据已经更新但尚未重新渲染组件。
-
updated：在组件更新之后执行，此时组件已经重新渲染，可以在这个钩子函数中访问和操作更新后的 DOM 元素。
-
beforeUnmount：在组件卸载之前执行，此时组件实例仍然可用，可以访问组件的 data 和 methods 等属性。
-
unmounted：在组件卸载之后执行，此时组件实例已经被销毁，可以在这个钩子函数中执行一些清理工作。
-
errorCaptured：在捕获到组件内部错误时执行，可以在这个钩子函数中处理错误或者在控制台中输出错误信息。
需要注意的是，在 Vue3 中，activated 和 deactivated 这两个生命周期钩子函数被移除了，取而代之的是使用 setup 函数中的 onActivated 和 onDeactivated 函数来实现相同的功能。另外，Vue3 还新增了一个全局钩子函数：onRenderTracked 和 onRenderTriggered，可以用于追踪组件的渲染过程。
<template>
<div>
<p id="dom">{{msg}}</p>
</div>
</template>
<script>
// @ is an alias to /src
import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
name: 'name',
setup() {
const data = reactive({
msg: '你好',
})
// 数据渲染前
onBeforeMount(() => {
console.log('onBeforeMount', document.querySelector('#dom'));
})
// 数据渲染后
onMounted(() => {
console.log('onMount', document.querySelector('#dom'));
setTimeout(() => {
data.msg = 'xxxxxxx';
}, 2000)
})
// 数据更新前
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
})
// 数据更新后
onUpdated(() => {
console.log('onUpdated');
})
return {
...toRefs(data),
}
},
}
</script>
