面试题：Vue 的生命周期总共有哪几个阶段？

Vue 3 的组件生命周期（也称为生命周期钩子）是组件从创建、挂载、更新到销毁的整个过程中的关键时间点。开发者可以在这些时间点注册回调函数（即生命周期钩子），在特定阶段执行自定义逻辑。

Vue 3 的生命周期主要分为四个阶段：创建（Creation）、挂载（Mounting）、更新（Updating） 和 销毁（Destruction）。

以下是 Vue 3 中主要的生命周期钩子（按执行顺序排列）：

这个阶段发生在组件实例被创建时，主要用于初始化数据、事件和侦听器。

setup() (Composition API)
- 触发时机：在组件实例被创建后，beforeCreate 钩子之前立即调用。
- 作用：这是使用 Composition API 时的入口点，用于定义响应式数据（ref, reactive）、计算属性（computed）、侦听器（watch）和方法（methods）。
- 注意：setup 是 Vue 3 Composition API 的核心，取代了 Vue 2 中的 beforeCreate 和 created 的大部分功能。在此阶段，this 不指向组件实例。
beforeCreate (Options API)
- 触发时机：在实例初始化之后，数据观测 (data observation) 和事件/侦听器的配置之前被调用。
- 作用：很少使用，此时 data 和 methods 还未被初始化。
created (Options API)
- 触发时机：在实例创建完成后被调用。此时已完成数据观测、属性和方法的运算，watch/event 事件回调也已配置完成。
- 作用：可以访问到 data、methods、computed 等。常用于发起 AJAX 请求获取初始数据，因为此时 DOM 尚未挂载，不能访问 $el。

这个阶段发生在组件被挂载到 DOM 上时。

beforeMount
- 触发时机：在组件被挂载到 DOM 之前调用。
- 作用：此时模板编译完成，但尚未将虚拟 DOM 渲染为真实 DOM 并插入页面。可以访问到编译后的模板，但不能访问 DOM 元素（$el 为 undefined）。
mounted
- 触发时机：在组件被挂载到 DOM 之后调用。
- 作用：此时组件的 DOM 已经渲染完成，可以访问到真实的 DOM 元素（$el 存在）。常用于操作 DOM、发起需要 DOM 的第三方库初始化（如图表库）、或执行依赖于 DOM 的操作。

这个阶段发生在组件的响应式数据发生变化，导致组件重新渲染时。

beforeUpdate
- 触发时机：在数据更新后，组件即将重新渲染之前调用。
- 作用：可以访问到更新前的 DOM 状态。适合在更新前进行一些准备工作。
updated
- 触发时机：在组件由于数据变更导致虚拟 DOM 重新渲染和更新后调用。
- 作用：DOM 已经更新，可以执行依赖于更新后 DOM 的操作。注意：避免在此钩子中修改状态，否则可能引发无限循环。

这个阶段发生在组件被销毁时。

beforeUnmount (Vue 3 中取代了 beforeDestroy)
- 触发时机：在组件实例被卸载和销毁之前调用。
- 作用：此时组件实例仍然完全可用。常用于清理操作，如清除定时器（setInterval）、解绑全局事件监听器、取消订阅、断开 WebSocket 连接等，以防止内存泄漏。
unmounted (Vue 3 中取代了 destroyed)
- 触发时机：在组件实例被卸载和销毁之后调用。
- 作用：组件实例的所有指令都被解绑，所有事件监听器被移除，所有子组件实例也被销毁。此时不能再访问组件实例。

setup() / beforeCreate → created →
beforeMount → mounted →
beforeUpdate → updated →
beforeUnmount → unmounted

理解生命周期对于编写高效、无内存泄漏的 Vue 应用至关重要。在 Vue 3 中，setup 钩子是使用 Composition API 时的核心入口。

THE END