Vue组件生命周期钩子：深入理解组件的生命周期阶段

在 Vue 中，每个组件实例从创建到销毁的整个过程，会经历一系列有序的初始化步骤——比如初始化数据侦听机制、编译模板、将组件挂载到 DOM 中，以及当数据变化时更新 DOM 等。而生命周期钩子（Lifecycle Hooks）就是在这些关键阶段自动运行的函数，它们为开发者提供了“介入”组件生命周期的入口，让我们可以在特定阶段执行自定义代码（比如初始化数据、操作 DOM、清理资源等）。

一、如何注册生命周期钩子？

生命周期钩子需要通过 Vue 提供的特定函数来注册。这些函数会将我们的回调函数“绑定”到组件实例的生命周期阶段，当组件运行到对应阶段时，回调函数会自动执行。

1. 常用钩子示例：onMounted

onMounted 是最常用的生命周期钩子之一，它会在组件完成初始渲染并将 DOM 节点挂载到页面中之后触发。这时候我们可以安全地操作组件对应的 DOM 元素（比如获取 DOM 尺寸、初始化依赖 DOM 的第三方库等）。

示例代码：

<script setup>
// 从 Vue 中导入 onMounted 钩子函数
import { onMounted } from 'vue'// 注册 onMounted 钩子：传入回调函数
onMounted(() => {console.log('组件已完成挂载，DOM 已可用！')// 例如：获取组件内某个 DOM 元素的高度const