🌱 一、什么是生命周期？

每个 Vue 组件实例在创建时，都会经历一系列的初始化步骤，比如：

• 设置数据侦听（让数据变化能自动更新视图）

• 编译模板

• 挂载到 DOM

• 数据变化时更新 DOM

在这个过程中，Vue 会自动调用一些被称为 生命周期钩子 (Lifecycle Hooks) 的函数。开发者可以利用这些钩子，在特定阶段执行自己的代码。

🔁 二、主要生命周期阶段与钩子

我们可以将整个过程分为四个主要阶段：

1. 创建 (Creation) 阶段

这是组件实例刚被创建的时期，还没有挂载到页面上。

• setup() (组合式 API)

  • 这是最早执行的钩子之一（在 beforeCreate 之后）。

  • 我们在这里使用 ref()、reactive() 定义响应式数据，并使用 onMounted 等注册其他钩子。

• onBeforeMount() / beforeMount (选项式 API)

  • 模板编译完成，但尚未挂载到 DOM。

  • 此时 $el 还不存在。

💡 思考一下：如果你需要在组件渲染前获取远程数据，放在哪个钩子里更合适？为什么不在 setup() 里直接发请求？

2. 挂载 (Mounting) 阶段

组件第一次被插入到 DOM 中。

• onMounted() / mounted

  • 组件已经挂载完成，DOM 节点已创建。

  • 可以安全地访问 $el 和操作 DOM。

  • 常用于发起网络请求、启动定时器、绑定事件监听器等。

✅ 最佳实践：大多数初始化操作都放在这里。

3. 更新 (Updating) 阶段

当响应式数据发生变化，组件重新渲染时触发。

• onBeforeUpdate() / beforeUpdate

  • 数据已更新，但视图还未重新渲染。

  • 可以访问旧的 DOM 状态。

• onUpdated() / updated

  • 组件已经重新渲染并更新了 DOM。

  • 注意：避免在此钩子中修改状态，否则可能引发无限循环。

⚠️ 提醒：这个钩子可能频繁触发，不要在这里做昂贵操作。

4. 卸载 (Unmounting) 阶段

组件从 DOM 中移除时。

• onBeforeUnmount() / beforeUnmount

  • 组件即将被销毁。

  • 是清理工作的最后机会。

• onUnmounted() / unmounted

  • 组件已被完全移除。

  • 清理定时器、解绑全局事件、销毁手动创建的 DOM 元素等。

🧹 必须清理：如果不清理定时器或事件监听，会造成内存泄漏！

🔄 特殊情况：<KeepAlive> 缓存组件

当组件被 <KeepAlive> 包裹时，它不会被真正“卸载”，而是进入缓存状态。

这时会有两个额外的钩子：

• onActivated() / activated

  • 组件被激活时调用（首次挂载或从缓存中恢复）。

• onDeactivated() / deactivated

  • 组件被缓存或卸载时调用。

📌 注意：即使组件没被卸载，onDeactivated 也会在它离开 DOM 时调用。

🛠️ 调试钩子（开发专用）

Vue 还提供了两个用于调试的钩子：

• onRenderTracked()

  • 当某个响应式依赖被追踪时调用（帮助你了解哪些数据影响了渲染）。

• onRenderTriggered()

  • 当某个依赖触发组件重新渲染时调用。

这两个钩子只在开发模式下有效，适合配合 debugger 使用，排查性能问题。

✅ 小结：关键钩子一览表