Vue2与Vue3生命周期钩子全解析：选项式与组合式API对比实践

脚本专家

Vue生命周期是每个Vue开发者必须掌握的核心概念，它定义了实例从创建到销毁的完整过程，并在关键节点提供钩子函数供开发者插入自定义逻辑。本文基于Vue 2和Vue 3的最新稳定版本，详细对比两代框架的钩子差异，同时给出组合式API的实操示例，帮助读者在项目中正确使用。

一、生命周期四大阶段概述

无论Vue 2还是Vue 3，生命周期都划分为四个不可逆的阶段：
- 创建阶段：实例初始化，数据观测与配置完成，但未挂载DOM。
- 挂载阶段：实例渲染到真实DOM，可操作DOM元素。
- 更新阶段：响应式数据变化触发DOM重新渲染，可多次触发。
- 销毁阶段：实例卸载，需清理定时器、事件监听等资源避免内存泄漏。

每个阶段都对应一对钩子（更新阶段除外，同一钩子可多次执行），开发者根据需求选择合适的钩子执行逻辑。

二、Vue 2 生命周期（选项式API）

Vue 2仅支持选项式API，8个钩子无需导入，直接在组件选项中定义即可。执行顺序固定：
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

1. 创建阶段
- beforeCreate：实例刚创建，data、methods、computed均未初始化，无法访问响应式数据。极少使用。
- created：实例初始化完成，可获取data、methods等，但DOM尚未生成（$el为undefined）。常用于发起初始化接口请求或数据处理。

2. 挂载阶段
- beforeMount：模板编译完成，虚拟DOM已生成但未挂载到真实DOM。此时无法操作真实DOM。
- mounted：实例挂载完成，真实DOM已渲染，可操作DOM元素、初始化第三方插件等。最常用的钩子之一。

3. 更新阶段
- beforeUpdate：响应式数据已变化但DOM尚未更新，可获取变化前的DOM状态。
- updated：DOM已根据最新数据重新渲染，注意避免在此钩子中修改数据导致无限循环。

4. 销毁阶段
- beforeDestroy：实例即将销毁，组件状态仍然完整。清理定时器、取消请求、解绑事件监听的最佳时机。
- destroyed：实例已销毁，所有指令和事件监听均被解绑，DOM仍存在但实例不再可用。

三、Vue 3 生命周期（选项式与组合式API）

Vue 3兼容Vue 2的选项式API，但更推荐组合式API（setup语法糖）。组合式API的钩子需要从vue中按需导入，函数名以"on"开头。

1. 选项式API（与Vue 2兼容）
用法与Vue 2几乎一致，仅销毁阶段钩子名称更名：
- beforeUnmount（替代beforeDestroy）
- unmounted（替代destroyed）
其他钩子名称、顺序、功能保持不变。示例：

2. export default {
3.   data() {
4.     return { count: 0 }
5.   },
6.   created() { /* 初始化 */ },
7.   mounted() { /* 操作DOM */ },
8.   beforeUnmount() { /* 清理资源 */ }
9. }

复制代码

2. 组合式API（setup语法糖）
组合式API的生命周期钩子对应关系如下：
- onBeforeMount（对应beforeMount）
- onMounted（对应mounted，最常用）
- onBeforeUpdate（对应beforeUpdate）
- onUpdated（对应updated）
- onBeforeUnmount（对应beforeDestroy，最常用）
- onUnmounted（对应destroyed）
此外，Vue 3还新增了onRenderTracked和onRenderTriggered两个调试钩子，用于跟踪响应式依赖收集和重新渲染触发条件，日常开发中几乎不用。

实操示例：使用定时器自动累加计数器，并在组件卸载时清理定时器：

2. <script setup>
3. import { ref, onMounted, onBeforeUnmount } from 'vue'
5. const count = ref(0)
6. let timer = null
8. onMounted(() => {
9.   timer = setInterval(() => {
10.     count.value++
11.   }, 1000)
12. })
14. onBeforeUnmount(() => {
15.   clearInterval(timer)
16. })
17. </script>

复制代码

四、Vue2与Vue3生命周期核心差异

1. API风格：Vue 2只有选项式；Vue 3兼容选项式并推荐组合式。
2. 销毁钩子名称：Vue 2使用beforeDestroy和destroyed；Vue 3选项式使用beforeUnmount和unmounted；组合式使用onBeforeUnmount和onUnmounted。
3. 使用方式：Vue 2钩子直接写对象属性；Vue 3组合式钩子需导入并传入回调函数，更灵活。
4. 调试能力：Vue 3新增的渲染调试钩子为开发测试提供更多信息。

五、实操注意事项

1. 操作真实DOM的时机：仅能在mounted（Vue 2 / Vue 3选项式）或onMounted（Vue 3组合式）以及之后的updated钩子中操作，beforeMount和beforeUpdate时DOM尚未更新。
2. 资源清理：所有定时器、全局事件监听、第三方插件实例必须在beforeDestroy（Vue 2）或onBeforeUnmount（Vue 3）中释放，否则会造成内存泄漏。
3. 接口请求：在created（Vue 2）或setup函数（Vue 3）中发起请求比mounted更早，但无法结合DOM操作；在mounted中发起可配合DOM操作。两种方式均可，根据需求选择。
4. 组件独立性：每个组件实例的生命周期完全独立，多个相同组件各自触发自己的钩子。

六、总结

Vue生命周期是“实例从创建到销毁”的完整过程，核心记忆口诀：“挂载后操作DOM，销毁前清理资源”。Vue 2使用选项式API，适合旧项目维护；Vue 3兼容选项式且推荐组合式，开发效率更高。掌握两代框架的钩子映射关系，就能在项目迁移或新开发中游刃有余。

热心网友3

感谢楼主分享，总结得非常清晰！Vue2和Vue3生命周期钩子的映射关系以及组合式API的实操示例都很实用。特别是销毁钩子名称变更和资源清理的提醒，对新手很友好。我之前在迁移老项目时总搞混`beforeDestroy`和`onBeforeUnmount`，看了这篇终于理清了。另外，关于在`setup`中直接请求接口和`onMounted`中请求的对比，楼主可以再深入讲讲吗？比如SSR场景下是否有区别？