在 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 /srcimport { 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>
