Vue3 的生命周期

Vue3 的生命周期

Vue3 组合式 API 生命周期：

setup 先执行，然后 onBeforeMount 挂载前、onMounted 挂载完成；

数据更新触发 onBeforeUpdate、onUpdated；

组件销毁执行 onBeforeUnmount、onUnmounted。

setup 没有 this，onMounted 可以操作 DOM，onBeforeUnmount 用来清理副作用。

一、组合式 API（setup 语法糖）

setup 在 beforeCreate 和 created 之前执行，setup 中没有 this

1. setup：创建阶段，组件实例还没生成，无 this
2. onBeforeMount：挂载前，DOM 还未渲染，拿不到真实 DOM
3. onMounted：挂载完成，DOM 渲染完毕，可以操作 DOM、发初始请求
4. onBeforeUpdate：数据更新前，DOM 还没重新渲染
5. onUpdated：数据更新后，DOM 更新完成
6. onBeforeUnmount：卸载前，组件实例还在，适合清理定时器、事件监听
7. onUnmounted：组件卸载完成，DOM 被销毁

二、这是 Vue3 官方生命周期流程图，同时展示选项式 API 和 组合式 API 的执行顺序

整体流程顺序

渲染器遇到组件 → setup → beforeCreate → 初始化选项式 API → created → 判断模板 → beforeMount → 初始渲染生成 DOM → mounted（挂载完成） 挂载之后分两条分支：

1. 数据改变：beforeUpdate → 重新渲染打补丁 → updated

2. 组件销毁：beforeUnmount → 销毁 DOM → unmounted

3. 逐段拆解

   1. 渲染器遇到组件 开始处理这个组件，最先执行 setup（组合式 API）

   ✅重点：setup 是所有钩子里面最先跑的，早于 beforeCreate，setup 内部没有 this。

   1. beforeCreate 选项式钩子，组件实例刚创建，数据、方法还没初始化。
   2. 初始化选项式 API 处理 data、methods、props 等内部数据。
   3. created 实例创建完成，数据、方法已经就绪；还没有 DOM，不能操作 DOM。
   4. 判断：是否存在预编译模板
   • YES：直接使用预编译好的模板
   • NO：即时编译模板（运行时编译）
   1. beforeMount 挂载之前，模板编译完成，虚拟 DOM 生成，但真实 DOM 还没插入页面。
   2. 初始渲染，创建并插入 DOM 节点 把虚拟 DOM 转为真实 DOM，挂载到页面。
   3. mounted ✅挂载完成，DOM 已经渲染到页面，可以获取 DOM 元素、发初始化接口请求。组件进入挂载稳定状态。

   挂载后分支 1：数据发生变化

   • beforeUpdate：数据已经更新，DOM 还没重新渲染
   • 重新渲染、diff、打补丁更新 DOM
   • updated：DOM 更新完毕

   挂载后分支 2：组件被取消挂载（销毁）

   • beforeUnmount：销毁前，实例还在，在这里清理定时器、事件监听、取消请求，防止内存泄漏
   • 执行销毁
   • unmounted：组件销毁完成，DOM 被移除

一句话总结这张图

渲染器拿到组件，最先执行 setup，然后依次执行 beforeCreate、created；模板处理完执行 beforeMount，渲染 DOM 后触发 mounted 完成挂载。挂载后，数据更新触发 beforeUpdate 和 updated；组件销毁执行 beforeUnmount、unmounted。

1. setup 执行时机：早于 beforeCreate，是 Vue3 最早执行的代码。

2. created 阶段：有数据，无 DOM；mounted 才有真实 DOM。

3. beforeUnmount 是清理副作用的最佳位置。

   精简口述短句

   Vue3 生命周期最先执行 setup，然后 beforeCreate、created；模板处理完执行 beforeMount，DOM 渲染完成触发 mounted。数据变化触发 beforeUpdate、updated；组件销毁执行 beforeUnmount、unmounted。setup 没有 this，mounted 可以操作 DOM，beforeUnmount 用来清理定时器、事件监听，避免内存泄漏。