深入浅出 Vue 生命周期：Vue2 与 Vue3 核心差异全解析

作为前端开发者，理解 Vue 的生命周期是编写高质量 Vue 应用的基础 —— 它决定了组件从诞生到销毁的整个过程中，我们该在何时执行数据请求、DOM 操作、事件监听等关键逻辑。本文将从基础概念出发，系统讲解 Vue 生命周期的核心逻辑，并重点对比 Vue2 与 Vue3 在生命周期钩子上的核心变化，帮你彻底搞懂这一核心知识点。

一、什么是 Vue 组件的生命周期？

Vue 组件的生命周期，本质上是组件从创建、挂载、更新到销毁的整个生命周期阶段，Vue 为每个阶段都提供了对应的 "钩子函数"（生命周期钩子）—— 这些钩子函数如同预设的 "触发点"，让我们能在组件不同阶段插入自定义逻辑。

可以用一个生动的比喻理解：组件的生命周期就像一个人的 "一生"，从 "出生（创建）"、"长大（挂载）"、"成长变化（更新）" 到 "离世（销毁）"，每个阶段都有对应的事情要做（比如出生时登记信息、长大后找工作、离世前清理资产），而生命周期钩子就是做这些事的 "最佳时机"。

二、Vue2 的生命周期钩子（Options API）

Vue2 采用 Options API 的写法，生命周期钩子以选项的形式配置在组件对象中，完整的生命周期分为 4 个阶段、8 个核心钩子，按执行顺序排列如下：

1. 创建阶段（组件实例化，未挂载到 DOM）

• beforeCreate：组件实例刚被创建，数据观测（data/props）、事件 / 生命周期钩子都未初始化。此时无法访问this（或this上的 data、methods）。
• created：组件实例创建完成，data、methods、props 已初始化，但 DOM 未生成（$el 不存在）。常用场景：初始化数据、发送异步请求（注意：此时无法操作 DOM）。

2. 挂载阶段（组件挂载到 DOM）

• beforeMount：挂载开始前调用，模板已编译完成，但未渲染到 DOM 中（$el 仍为虚拟 DOM）。
• mounted：组件挂载完成，真实 DOM 已渲染。常用场景：DOM 操作（如初始化第三方插件、获取 DOM 元素尺寸）、发送需要依赖 DOM 的请求。

3. 更新阶段（响应式数据变化触发）

• beforeUpdate：数据更新后、DOM 重新渲染前调用。可在此时获取更新前的 DOM 状态。
• updated：DOM 重新渲染完成后调用。注意：避免在此钩子中修改数据，否则易引发无限循环。

4. 销毁阶段（组件实例销毁）

• beforeDestroy：组件销毁前调用，此时组件实例仍完整，可用于清理定时器、取消事件监听、解绑自定义事件等。
• destroyed：组件销毁完成，实例所有指令解绑、事件监听移除、子组件销毁。

Vue2 生命周期补充钩子

• activated：keep-alive 缓存的组件激活时调用。
• deactivated：keep-alive 缓存的组件失活时调用。
• errorCaptured：捕获子孙组件的错误时调用。

三、Vue3 的生命周期钩子：两大核心变化

Vue3 同时支持 Options API 和 Composition API，其中 Options API 的生命周期钩子基本兼容 Vue2，核心变化集中在 Composition API（setup 语法）中，主要有两大调整：

变化 1：setup 替代 beforeCreate/created

Vue3 的setup函数是 Composition API 的入口，它的执行时机早于 beforeCreate（组件实例创建前），且在setup中已能访问 props、响应式数据等，因此 Vue3 中不再需要 beforeCreate 和 created 钩子—— 原本写在这两个钩子中的逻辑，直接写在 setup 函数中即可。

变化 2：Composition API 的生命周期钩子命名调整

Vue3 为 Composition API 提供了单独的生命周期钩子函数（需手动导入），命名规则为：on + 原钩子名（首字母大写），且部分钩子名称有微调，具体对应关系如下：

表格

新增钩子：Vue3 独有的生命周期钩子

Vue3 还新增了 2 个实用的生命周期钩子，用于处理组件更新的精细控制：

• onRenderTracked：组件渲染过程中，响应式依赖被追踪时调用（开发环境调试用）。
• onRenderTriggered：组件重新渲染的触发原因被检测到时调用（开发环境调试用）。

四、Vue2 与 Vue3 生命周期实战对比

1. Vue2（Options API）写法示例

vue

<template> <div>{{ msg }}</div> </template> <script> export default { data() { return { msg: 'Vue2生命周期示例' } }, beforeCreate() { console.log('beforeCreate：无法访问data', this.msg) // undefined }, created() { console.log('created：可访问data', this.msg) // Vue2生命周期示例 this.fetchData() // 初始化请求 }, mounted() { console.log('mounted：DOM已挂载', document.querySelector('div').innerText) }, beforeUpdate() { console.log('beforeUpdate：数据更新，DOM未更新') }, beforeDestroy() { console.log('beforeDestroy：清理定时器/事件') clearInterval(this.timer) }, methods: { fetchData() { // 异步请求逻辑 } } } </script>

2. Vue3（Composition API）写法示例

vue

<template> <div>{{ msg }}</div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue' // 替代beforeCreate/created：直接写在setup中 const msg = ref('Vue3生命周期示例') console.log('setup：可访问响应式数据', msg.value) // Vue3生命周期示例 fetchData() // 初始化请求 // 挂载完成 onMounted(() => { console.log('onMounted：DOM已挂载', document.querySelector('div').innerText) }) // 卸载前清理 onBeforeUnmount(() => { console.log('onBeforeUnmount：清理定时器/事件') // clearInterval(timer) }) // 异步请求函数 function fetchData() { // 异步请求逻辑 } </script>

五、核心注意事项

1. Vue3 的向下兼容：Vue3 的 Options API 仍支持 Vue2 的所有生命周期钩子（除 beforeDestroy/destroyed 改名为 beforeUnmount/unmounted），迁移项目时可逐步替换。
2. setup 中无 this：Composition API 的 setup 函数中没有this，需通过参数获取 props、上下文等，生命周期钩子也无需绑定 this。
3. 避免无限更新：在 updated/onUpdated 中修改响应式数据时，需加条件判断，否则会触发无限更新循环。
4. 异步操作时机：数据请求建议放在 created/setup 或 mounted 中，优先选 created/setup（更早执行，无 DOM 依赖时）。

总结

1. Vue 生命周期是组件从创建到销毁的完整阶段，核心分为创建、挂载、更新、销毁 4 个阶段，每个阶段对应可执行自定义逻辑的钩子函数。
2. Vue3 的核心变化：setup 函数替代 beforeCreate/created，Composition API 的钩子命名调整为on+钩子名，且 beforeDestroy/destroyed 更名为 beforeUnmount/unmounted。
3. Vue3 同时兼容 Options API 和 Composition API，迁移时可平滑过渡，建议新项目优先使用 Composition API 的生命周期钩子，更符合逻辑聚合的设计思想。

理解 Vue 生命周期的核心是 "找对时机做对事"，无论是 Vue2 还是 Vue3，掌握钩子函数的执行顺序和适用场景，才能写出更高效、更健壮的 Vue 应用。