Vue生命周期速查之Vue2与Vue3钩子全解析

作者：袖梨 2026-06-08

Vue生命周期，本质是Vue实例从创建到销毁的完整过程，每个阶段都会触发对应的钩子函数（生命周期钩子），开发者可通过这些钩子，在不同时机执行所需逻辑（如初始化数据、操作DOM、清理资源等）。核心分为「创建、挂载、更新、销毁」四大阶段，Vue2与Vue3的生命周期整体逻辑一致，但钩子名称、使用方式有差异，以下分版本详细解析，兼顾理论与实操，让新手也能快速上手、高效运用。

一、先明确核心：生命周期四大阶段

无论Vue2还是Vue3，生命周期都围绕「实例从生到死」展开，四大核心阶段不可逆，每个阶段的钩子函数只执行一次（更新阶段除外，可多次触发）：

创建阶段：实例从无到有，初始化数据、配置，未挂载DOM；
挂载阶段：实例挂载到DOM树上，生成真实DOM，可开始操作DOM；
更新阶段：响应式数据发生变化，触发DOM重新渲染，可多次执行；
销毁阶段：实例被销毁，清理资源，避免内存泄漏。

二、Vue2 生命周期（选项式API，最常用）

Vue2使用选项式API，生命周期钩子共8个，按执行顺序排列，无需额外导入，直接写在组件选项中即可使用，每个钩子的作用清晰，适配日常开发场景。

1. 创建阶段（实例初始化，未挂载DOM）

核心：初始化实例、数据观测，此时DOM尚未生成，无法操作DOM。

beforeCreate（创建前） ：实例刚被创建，data、methods、computed等尚未初始化，无法访问this.data、this.methods，几乎不用（仅特殊场景初始化非响应式数据）。
created（创建后） ：实例创建完成，data、methods、computed已初始化，可访问响应式数据，但DOM未挂载（$el为undefined），常用场景：发起初始化接口请求、初始化数据处理。

2. 挂载阶段（实例挂载到DOM，可操作DOM）

核心：将实例渲染到页面，生成真实DOM，此时可正常操作DOM。

beforeMount（挂载前） ：模板已编译完成，但尚未挂载到DOM树上，$el已存在（虚拟DOM），但真实DOM未生成，仍无法操作真实DOM。
mounted（挂载后） ：实例已完全挂载到DOM树上，真实DOM已生成，可正常操作DOM（如获取DOM元素、初始化第三方插件），是最常用的钩子之一。

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

核心：当data中的响应式数据发生变化时，触发该阶段，仅更新变化的部分，无需重新渲染整个页面。

beforeUpdate（更新前） ：响应式数据已变化，但DOM尚未重新渲染，可获取变化前的DOM状态，常用场景：更新前保存DOM原有状态。
updated（更新后） ：DOM已根据变化后的响应式数据重新渲染，可获取更新后的DOM状态，注意：避免在该钩子中修改响应式数据（会导致无限循环更新）。

4. 销毁阶段（实例销毁，清理资源）

核心：实例被销毁（如组件卸载），需清理资源，避免内存泄漏。

beforeDestroy（销毁前） ：实例即将被销毁，仍可访问实例的所有属性和方法，常用场景：清理资源（清除定时器、取消接口请求、解绑事件监听）。
destroyed（销毁后） ：实例已完全销毁，所有属性、方法、事件监听均被解绑，DOM仍存在（需手动清理），几乎不用（清理工作优先在beforeDestroy中完成）。

Vue2 生命周期执行顺序（必记）

beforeCreate → created → beforeMount → mounted → （数据变化）beforeUpdate → updated → （实例销毁）beforeDestroy → destroyed

三、Vue3 生命周期（选项式+组合式API，推荐）

Vue3兼容Vue2的选项式API（生命周期用法与Vue2一致），但更推荐使用组合式API（setup语法糖），组合式API的生命周期钩子需手动导入，名称以“on”开头，核心逻辑与Vue2完全一致，只是使用方式更灵活、轻量化。

1. Vue3 选项式API（与Vue2兼容）

用法和Vue2完全一致，仅替换2个钩子名称（语义更准确），其余钩子功能、执行顺序完全相同：

用beforeUnmount 替代 Vue2 的 beforeDestroy；
用unmounted 替代 Vue2 的 destroyed。

<script>export default {  data() {    return { count: 0 }  },  beforeCreate() { /* 实例创建前 */ },  created() { /* 实例创建后 */ },  beforeMount() { /* 挂载前 */ },  mounted() { /* 挂载后 */ },  beforeUpdate() { /* 更新前 */ },  updated() { /* 更新后 */ },  beforeUnmount() { /* 卸载前（替代beforeDestroy） */ },  unmounted() { /* 卸载后（替代destroyed） */ }}</script>

2. Vue3 组合式API（setup语法糖，推荐）

组合式API的生命周期钩子需从vue中导入，名称以“on”开头，与Vue2的钩子一一对应，函数式调用，更贴合组合式开发逻辑，常用钩子如下（按执行顺序）：

onBeforeMount：对应Vue2的beforeMount，挂载前执行；
onMounted：对应Vue2的mounted，挂载后执行（最常用）；
onBeforeUpdate：对应Vue2的beforeUpdate，更新前执行；
onUpdated：对应Vue2的updated，更新后执行；
onBeforeUnmount：对应Vue2的beforeDestroy，卸载前执行（最常用，清理资源）；
onUnmounted：对应Vue2的destroyed，卸载后执行。

补充：Vue3新增2个调试用钩子（onRenderTracked、onRenderTriggered），日常开发几乎不用，仅用于调试响应式数据的渲染跟踪。

Vue3 组合式API 实操示例（setup语法糖）

<script setup>import { ref, onMounted, onBeforeUnmount } from 'vue'const count = ref(0)let timer = null// 挂载后：初始化定时器（常用场景）onMounted(() => {  timer = setInterval(() => {    count.value++  }, 1000)})// 卸载前：清理定时器（避免内存泄漏，常用场景）onBeforeUnmount(() => {  clearInterval(timer)})</script>

四、Vue2与Vue3生命周期核心差异（重点）

对比维度	Vue2	Vue3
API类型	仅支持选项式API	兼容选项式，推荐组合式（setup）
钩子名称（销毁阶段）	beforeDestroy、destroyed	beforeUnmount、unmounted（选项式）；onBeforeUnmount、onUnmounted（组合式）
钩子使用	无需导入，直接写在组件选项中	组合式需导入，函数式调用，更灵活
核心优势	兼容旧项目，逻辑直观，上手简单	轻量化，开发效率高，支持调试钩子

五、生命周期实操注意事项

操作DOM的时机：仅能在mounted（Vue2/Vue3）、updated（Vue2/Vue3）中操作真实DOM，beforeMount、beforeUpdate中无法操作（未生成/未更新）。
避免内存泄漏：定时器、事件监听、第三方插件实例，必须在beforeDestroy（Vue2）/onBeforeUnmount（Vue3）中清理，否则会导致内存泄漏。
接口请求时机：初始化请求可在created（Vue2）/setup中（Vue3）、mounted中发起；created中发起请求更早，但无法操作DOM；mounted中发起可结合DOM操作。
组件复用：每个组件实例的生命周期独立执行，互不影响，比如多个相同组件，各自的钩子函数分别触发。