文章总结： 本文详细介绍了Vue框架的生命周期概念，包括Vue2和Vue3的生命周期钩子函数及其使用场景。Vue生命周期是指实例从创建到销毁的整个过程，Vue提供了多个钩子函数供开发者在特定阶段执行逻辑。Vue3对Vue2的部分钩子函数名称进行了调整，如beforeDestroy改为beforeUnmount，destroyed改为unmounted。Vue3还引入了组合式API，使用onMounted、onUpdated等函数式钩子，需要在setup函数中调用。文章通过对比表格清晰展示了Vue2与Vue3生命周期的差异，为开发者提供了实用的参考指南。 综合评分： 85 文章分类： 其他

VUE生命周期

原创

静观云起

码云精炼

2025年12月15日 17:05 广东

图一 vue2生命周期图

图二 vue3生命周期图

一 生命周期概述

生命周期是指Vue实例(或组件)从创建 → 挂载 → 更新 → 销毁的整个过程。在这个过程中，Vue会在特定阶段自动调用一些函数，这些函数叫做生命周期钩子(Lifecycle Hooks)，我们可以在这些钩子中执行特定的逻辑，比如数据请求、DOM 操作、资源清理等。

二 Vue2 生命周期

Vue2使用的是选项式API(Options API)，生命周期钩子是定义在组件选项对象中的方法，比如 created(), mounted() 等。

Vue2 生命周期钩子详解：

| | | | | — | — | — | | 钩子函数 | 触发时机 | 用途 | | beforeCreate | 实例刚被创建，数据观测和事件配置之前 | 几乎不用，此时无法访问 data/methods | | created | 实例创建完成，数据和方法已初始化，但还未挂载到 DOM | 初始化数据、异步请求(DOM还不可用) | | beforeMount | 模板编译/渲染完成，但还未将组件挂载到页面上 | 很少使用 | | mounted | 组件已挂载到DOM，可以访问DOM元素 | 操作DOM、初始化第三方库 | | beforeUpdate | 数据发生变化，虚拟DOM 重新渲染之前 | 可以获取更新前的DOM状态 | | updated | 数据更新导致DOM重新渲染并应用后 | 避免在此修改数据(可能造成循环) | | beforeDestroy | 实例销毁之前调用 | 清理定时器、解绑事件、取消请求 | | destroyed | 实例销毁后调用 | 组件已完全移除，无响应式、无监听 |

**三 Vue3 生命周期

选项式API(Options API)和Vue 2几乎一致,但钩子函数名称有变化，beforeDestroy 变为 beforeUnmount，destroyed 变为 unmounted 。组合式API(Composition API)通过setup() 函数，使用 *onMounted、onUpdated等函数式钩子。*

| Vue2 钩子函数 | Vue3 钩子函数 | | — | — | | beforeCreate | beforeCreate | | created | created | | beforeMount | beforeMount | | mounted | mounted | | beforeUpdate | beforeUpdate | | updated | updated | | beforeDestroy | beforeUnmount | | destroyed | unmounted |

✅ 在 Vue3 的选项式API中，你可以继续使用这些生命周期钩子，写法与Vue2 基本一致，只需要记住两个钩子改名即可。

组合式API(setup 函数)中，不能直接使用Vue2 的生命周期函数名，而是要导入对应的钩子函数，如onMounted、onUpdated 等，并在setup()中调用。这些钩子函数必须在 setup() 函数内调用才有效。

Vue3组合式API常用生命周期函数：

| 功能 | Vue3 组合式API函数 | 说明 | | — | — | — | | 实例初始化前 | 无直接对应(setup执行更早) | setup 执行时机在 beforeCreate和created之间 | | 创建完成后(类似created) | 无直接对应，用setup | setup 函数中可以初始化数据、请求等 | | 挂载前 | beforeMount | 组件挂载到DOM之前 | | 挂载后 | onMounted | 组件已挂载，可以访问 DOM | | 更新前 | beforeUpdate | 数据更新,DOM更新前 | | 更新后 | onUpdated | 数据更新，DOM已更新 | | 销毁前 | beforeUnmount | 实例销毁之前(原 beforeDestroy) | | 销毁后 | onUnmounted | 实例销毁后(原destroyed) |

组合式API使用例子如下：

import { onMounted, onUpdated, onUnmounted } from 'vue'export default {  setup() {    console.log('setup执行,相当于Vue2的created前后')    onMounted(() => {      console.log('组件已挂载到DOM，可以操作DOM元素')    })    onUpdated(() => {      console.log('组件已更新，DOM已重新渲染')    })    onUnmounted(() => {      console.log('组件即将被销毁,进行清理工作')    })  }}

四 Vue2与Vue3生命周期对比

| Vue2 钩子函数 | Vue3 钩子函数 | Vue3组合式API函数 | | — | — | — | | beforeCreate | beforeCreate | 无(在setup中) | | created | created | 无(在setup中) | | beforeMount | beforeMount | beforeMount | | mounted | mounted | onMounted | | beforeUpdate | beforeUpdate | beforeUpdate | | updated | updated | onUpdated | | beforeDestroy | beforeUnmount | beforeUnmount | | destroyed | unmounted | onUnmounted |

查看原文：《VUE生命周期》