Vue3中的生命周期钩子函数

Vue3 的生命周期钩子，就是组件从创建到销毁的 "关键时间节点"，能让我们在不同阶段插入自定义逻辑，组合式 API 和选项式 API 写法略有差异，但核心一致。

一、三大核心阶段

1. 挂载阶段：组件 "出生亮相"

• setup() ：组合式 API 专属入口，组件实例创建前执行，props 已解析，不能用this，用来定义响应式数据、方法。
• onBeforeMount/beforeMount：挂载到 DOM 前执行，模板已编译但未渲染，可做初始化准备。
• onMounted/mounted ：组件挂载完成，DOM 已生成。最常用，适合获取 DOM、发起请求、初始化第三方插件。

2. 更新阶段：组件 "数据刷新"

• onBeforeUpdate/beforeUpdate：响应式数据变化，DOM 更新前执行，可获取更新前 DOM 状态。
• onUpdated/updated：DOM 更新完成后执行，不要在此修改响应式数据，避免无限循环。

3. 卸载阶段：组件 "告别清理"

• onBeforeUnmount/beforeUnmount：组件卸载前执行，DOM 仍存在，需清除定时器、取消事件监听，防止内存泄漏。
• onUnmounted/unmounted：组件卸载完成，实例和 DOM 已销毁，做最终收尾。

二、Vue2 vs Vue3 钩子对比

分类	Vue2 选项式 API	Vue3 选项式 API	Vue3 组合式 API	执行时机	核心用途
初始化阶段	beforeCreate	beforeCreate	setup () 替代	组件实例创建之初，props 已解析，但数据观测（data/watch）、事件配置未完成	极少使用，可做无依赖的初始化（如定义简单变量）
初始化阶段	created	created	setup () 替代	组件实例创建完成，数据观测、事件配置已完成，但 DOM 未挂载（$el 不存在）	1. 发起异步请求（无需 DOM）；2. 初始化非 DOM 依赖的响应式数据；3. 调用方法初始化数据
挂载阶段	beforeMount	beforeMount	onBeforeMount	模板编译完成，虚拟 DOM 已生成，但尚未挂载到真实 DOM（页面无组件节点）	1. 做挂载前最后准备；2. 初始化无需依赖 DOM 的配置
挂载阶段	mounted	mounted	onMounted	组件真实 DOM 已挂载到页面，$el 可访问	1. 获取 / 操作 DOM 元素（如 ref、$el）；2. 初始化第三方插件（ECharts、Swiper）；3. 发起依赖 DOM 的异步请求
更新阶段	beforeUpdate	beforeUpdate	onBeforeUpdate	响应式数据更新，虚拟 DOM 重新渲染前（数据已更新，DOM 仍为旧状态）	1. 获取更新前的 DOM 状态（如记录元素位置、尺寸）；2. 做 DOM 更新前的预处理
更新阶段	updated	updated	onUpdated	虚拟 DOM 重新渲染完成，DOM 与最新数据同步	1. 获取更新后的 DOM 状态；2. 执行 DOM 相关的后置操作（如动画、滚动同步）
卸载阶段	beforeDestroy	beforeUnmount	onBeforeUnmount	组件卸载 / 销毁前，组件实例、DOM 仍完整存在	1. 清除定时器 / 计时器；2. 取消事件监听（如 window / 自定义事件）；3. 销毁第三方插件实例；4. 释放全局变量引用

补充说明：

1. 组合式 API 使用规则： Vue3 组合式 API 中所有生命周期钩子（除 setup）都需先从 vue 导入，且只能在 setup 内调用：

   import { onMounted, onBeforeUnmount } from 'vue'
   setup() {
     onMounted(() => { /* 逻辑 */ })
     onBeforeUnmount(() => { /* 逻辑 */ })
   }

2. **选项式 API 兼容性：**Vue3 选项式 API 完全兼容 Vue2 的写法（仅 beforeDestroy/destroyed 重命名为 beforeUnmount/unmounted），降低迁移成本；

3. **执行顺序优先级：**setup 是 Vue3 组合式 API 的入口，执行时机早于 beforeCreate，覆盖了 Vue2 中 beforeCreate + created 的所有场景。