Vue3的生命周期钩子有哪些变化？

文章目录

• • 一、Vue3生命周期钩子核心变化
  • • [1.1 创建阶段：setup 替代 beforeCreate/created](#1.1 创建阶段：setup 替代 beforeCreate/created)
    • [1.2 卸载阶段：命名优化（语义化升级）](#1.2 卸载阶段：命名优化（语义化升级）)
    • [1.3 组合式API钩子：函数式引入，支持Tree-shaking](#1.3 组合式API钩子：函数式引入，支持Tree-shaking)
  • 二、Vue2与Vue3钩子完整对比表
  • 三、两种API钩子用法实战示例
  • • [3.1 Options API 用法（兼容Vue2，无侵入）](#3.1 Options API 用法（兼容Vue2，无侵入）)
    • [3.2 Composition API 用法（Vue3推荐，<script setup>）](#3.2 Composition API 用法（Vue3推荐，<script setup>）)
    • [3.3 混合使用注意事项](#3.3 混合使用注意事项)
  • 四、Vue3新增生命周期钩子详解
  • • [4.1 onRenderTracked：响应式依赖跟踪](#4.1 onRenderTracked：响应式依赖跟踪)
    • [4.2 onRenderTriggered：响应式依赖触发](#4.2 onRenderTriggered：响应式依赖触发)
  • 五、项目迁移与使用建议
  • • [5.1 老项目迁移（Vue2 → Vue3）](#5.1 老项目迁移（Vue2 → Vue3）)
    • [5.2 新项目开发建议](#5.2 新项目开发建议)
  • 六、核心变化总结

一、Vue3生命周期钩子核心变化

Vue3 生命周期钩子整体保留了 Vue2 的核心执行流程（创建、挂载、更新、卸载），但在 API 形式、命名规范和功能补充上做了三大关键优化，兼顾兼容性与工程化需求。

1.1 创建阶段：setup 替代 beforeCreate/created

Vue2 中的 beforeCreate（实例初始化前）和 created（实例创建完成），在 Vue3 组合式 API 中被 setup() 函数统一替代。

• 执行时机：setup 在实例初始化前（比 Vue2 beforeCreate 更早）执行，无法访问 this

• 核心作用：聚合组件初始化逻辑（数据定义、方法声明、依赖引入），替代传统两个创建阶段钩子

• 兼容性：Vue3 仍支持 beforeCreate/created 选项，适配旧项目迁移

1.2 卸载阶段：命名优化（语义化升级）

Vue2 卸载阶段的 beforeDestroy/destroyed，在 Vue3 中更名为 beforeUnmount/unmounted，命名更贴合"组件卸载"的语义，避免"销毁"的歧义。

兼容说明：Vue3 兼容模式（@vue/compat）下仍可使用旧命名，但官方推荐使用新命名。

1.3 组合式API钩子：函数式引入，支持Tree-shaking

Vue3 组合式 API 中，生命周期钩子需通过 import 手动引入，统一以 onXxx 前缀命名（如 onMounted），支持 Tree-shaking 优化，未使用的钩子不会被打包。

二、Vue2与Vue3钩子完整对比表

以下表格汇总两者钩子对应关系、执行时机及核心差异，清晰呈现变化细节：

生命周期阶段	Vue2 钩子（Options API）	Vue3 钩子（Options API）	Vue3 钩子（Composition API）	执行时机说明
创建阶段	beforeCreate	支持（兼容）	setup() 替代	实例初始化前，数据/事件未挂载
	created	支持（兼容）	setup() 替代	实例创建完成，可访问数据/方法，DOM未挂载
挂载阶段	beforeMount	支持（兼容）	onBeforeMount	模板编译完成，DOM未渲染
	mounted	支持（兼容）	onMounted	DOM渲染完成，可操作真实DOM
更新阶段	beforeUpdate	支持（兼容）	onBeforeUpdate	数据更新，虚拟DOM未.patch
	updated	支持（兼容）	onUpdated	DOM更新完成，可操作最新DOM
卸载阶段	beforeDestroy	支持（兼容）	onBeforeUnmount	组件卸载前，可清理资源（定时器/事件）
	destroyed	支持（兼容）	onUnmounted	组件完全卸载，数据/事件绑定移除
特殊场景	activated	支持（兼容）	onActivated	keep-alive组件激活时
	deactivated	支持（兼容）	onDeactivated	keep-alive组件停用时
	errorCaptured	支持（兼容）	onErrorCaptured	捕获后代组件错误时
调试场景	无	无	onRenderTracked/onRenderTriggered	响应式依赖跟踪/触发时（调试用）

三、两种API钩子用法实战示例

Vue3 支持 Options API 和 Composition API 两种写法，钩子用法差异明显，以下为核心场景示例，适配 CSDN 代码格式。

3.1 Options API 用法（兼容Vue2，无侵入）

Vue3 中使用 Options API 时，生命周期钩子用法与 Vue2 完全一致，仅卸载阶段可选择新命名。

<template>
  <div>{{ count }}<button @click="count++">+1</button></div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  // 创建阶段：仍支持beforeCreate/created
  beforeCreate() {
    console.log('实例初始化前（Vue2兼容写法）')
  },
  created() {
    console.log('实例创建完成，可访问count：', this.count)
  },
  // 挂载阶段：用法不变
  mounted() {
    console.log('DOM挂载完成，可操作DOM')
  },
  // 卸载阶段：推荐用新命名
  beforeUnmount() {
    console.log('组件卸载前，清理定时器')
  },
  unmounted() {
    console.log('组件已卸载')
  }
}
</script>

3.2 Composition API 用法（Vue3推荐，

组合式 API 需手动引入钩子，用 <script setup> 语法糖，setup 替代 beforeCreate/created。

<template>
  <div>{{ count }}<button @click="count++">+1</button></div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue'

// setup替代beforeCreate/created，执行时机更早
console.log('setup执行，实例初始化前')

const count = ref(0)

// 挂载阶段钩子
onBeforeMount(() => {
  console.log('DOM挂载前，模板已编译')
})

onMounted(() => {
  console.log('DOM挂载完成，count值：', count.value)
})

// 卸载阶段钩子
onBeforeUnmount(() => {
  console.log('组件卸载前，清理资源')
})

onUnmounted(() => {
  console.log('组件已卸载')
})
</script>

3.3 混合使用注意事项

Vue3 允许两种 API 钩子混合使用，但组合式 API 钩子会先于 Options API 执行，不建议混合使用（增加心智负担）。

<script>
import { onMounted } from 'vue'
export default {
  mounted() {
    console.log('Options API mounted') // 后执行
  },
  setup() {
    onMounted(() => {
      console.log('Composition API onMounted') // 先执行
    })
  }
}
</script>

四、Vue3新增生命周期钩子详解

Vue3 新增 2 个调试专用钩子，用于跟踪响应式依赖，仅在开发环境有效，生产环境会被 Tree-shaking 移除。

4.1 onRenderTracked：响应式依赖跟踪

组件渲染时触发，记录哪些响应式数据被跟踪，可用于调试"哪些数据触发了渲染"。

<script setup>
import { ref, onRenderTracked } from 'vue'
const count = ref(0)

onRenderTracked((event) => {
  // event包含依赖相关信息：target（目标对象）、key（属性名）、type（跟踪类型）
  console.log('跟踪到响应式依赖：', event)
})
</script>

4.2 onRenderTriggered：响应式依赖触发

响应式数据更新触发组件重新渲染时执行，记录"哪个数据更新导致了渲染"。

<script setup>
import { ref, onRenderTriggered } from 'vue'
const count = ref(0)

onRenderTriggered((event) => {
  console.log('响应式数据触发更新：', event)
})

// 点击按钮修改count，会触发onRenderTriggered
const increment = () => count.value++
</script>

五、项目迁移与使用建议

结合项目场景选择合适的钩子用法，老项目迁移无需一次性修改，可渐进式适配。

5.1 老项目迁移（Vue2 → Vue3）

1. 保留 Options API 钩子，先升级 Vue 版本至 2.7（过渡版本），再逐步迁移至 Composition API

2. 卸载阶段优先替换 beforeDestroy → beforeUnmount、destroyed → unmounted

3. 复杂组件的创建阶段逻辑，逐步迁移至 setup 函数

5.2 新项目开发建议

• 小型项目/简单组件：可使用 Options API，降低学习成本

• 中大型项目/复杂组件：推荐 Composition API +

六、核心变化总结

Vue3 生命周期钩子的变化核心是"适配组合式 API、优化语义、补充调试能力"，未颠覆 Vue2 的核心流程，兼顾兼容性与工程化需求：

1. 核心替代：setup 统一替代 beforeCreate/created，功能更聚合

2. 命名优化：卸载阶段钩子语义化升级，兼容旧命名

3. API 形式：组合式 API 钩子需手动引入，支持 Tree-shaking

4. 功能补充：新增 2 个调试钩子，提升开发体验

5. 兼容策略：完全支持 Options API，渐进式迁移无压力