生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
注册周期钩子
举例来说，onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：
vue
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 onMounted、onUpdated 和 onUnmounted。所有生命周期钩子的完整参考及其用法请参考 API 索引。
当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册。例如，请不要这样做：
js
setTimeout(() => {
onMounted(() => {
// 异步注册时当前组件实例已丢失
// 这将不会正常工作
})
}, 100)
注意这并不意味着对 onMounted 的调用必须放在 setup() 或 <script setup> 内的词法上下文中。onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。
生命周期图示
下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。
有关所有生命周期钩子及其各自用例的详细信息，请参考生命周期钩子 API 索引。
组合式api常用的生命周期钩子 1、onBeforeMount() 在组件被挂载到DOM中之前调用。
<script setup>
import { onBeforeMount, ref } from 'vue';
onBeforeMount(() => {
// 在组件挂载前加载数据
});
</script>
备注：由于 onBeforeMount() 钩子在服务端渲染（SSR）期间也会被调用，因此确保在这个钩子中执行的代码是可以在没有 DOM 环境下运行的，例如异步数据加载是可以的，而涉及到 DOM 操作的代码则不适合放在这里。此外，异步操作可能需要使用 async/await 语法来等待操作完成，如上面示例中所示。
2、onMounted() 当组件被挂载到DOM中后调用。这是执行异步操作或初始化事件监听器的好地方。
<script setup>
import { onMounted, ref } from 'vue';
onMounted(() => {
// 执行方法
});
</script>
备注：onMounted() 只在服务端渲染（SSR）中被跳过，因为它依赖于浏览器环境，不会在没有 DOM 的环境中执行。如果你的应用支持 SSR，确保在 onMounted 中执行的代码不会抛出错误，因为它们可能在没有 DOM 的环境中被调用。
3、onBeforeUpdate() 在组件开始更新之前调用。
<script setup>
import { onBeforeUpdate, ref } from 'vue';
onBeforeUpdate(() => {
// 执行方法
});
</script>
备注：
-
onBeforeUpdate() 钩子并不阻止更新的发生，它只是允许你在更新发生前执行一些代码。如果你需要在更新后执行代码，可以使用 onUpdated() 生命周期钩子。
-
在 Vue 3 的 Composition API 中，这些钩子函数应该在 setup() 函数内部定义，以便它们可以访问由 ref 或 reactive 创建的响应式状态。
4、onUpdated()
当组件完成更新后调用。这个钩子在服务器端渲染期间不被调用。
<script setup>
import { onUpdated, ref } from 'vue';
onUpdated(() => {
// 组件更新后执行的代码
});
</script>
备注：onUpdated() 钩子在服务端渲染（SSR）期间不会被调用，因为它依赖于 DOM 更新，而 SSR 在客户端首次加载时才生成完整的 HTML。因此，确保你的 onUpdated 钩子中的代码不会在没有 DOM 的环境中引发错误。
5、onBeforeUnmount() 在组件被卸载并从DOM中移除之前调用。
<script setup>
import { onBeforeUnmount, ref } from 'vue';
onBeforeUnmount(() => {
// 在组件卸载前停止计数
});
</script>
备注：确保在组件生命周期的适当阶段进行清理是非常重要的，特别是在处理定时器、WebSocket 连接或外部资源时。onBeforeUnmount() 提供了一个执行这些清理任务的理想时机。
6、onUnmounted() 当组件被卸载并从DOM中移除时调用。这是清除定时器、事件监听器等资源的好时机。
<script setup>
import { onUnmounted, ref } from 'vue';
onUnmounted(() => {
// 当组件卸载前执行
});
</script>
备注：在实际应用中，你可能会有更复杂的场景，例如订阅 WebSocket 连接、注册全局事件监听器等，在这些情况下，onUnmounted() 钩子同样可以用来确保在组件不再使用时进行适当的清理工作。
