Vue 3 生命周期钩子执行顺序确定：同钩子按注册顺序执行，不同钩子严格遵循生命周期时序，父子组件钩子交错但各自内部守序，且所有 onXXX 必须在 setup 中同步调用。

Vue 3 中多个生命周期钩子回调的执行顺序是确定的：同一钩子类型下，先注册的回调先执行；不同钩子之间严格按生命周期阶段顺序触发。

同一钩子内多个回调按注册顺序执行

在 setup() 中多次调用同一个 onXXX 钩子（如 onMounted），它们会按代码书写顺序依次执行：

• 第一次调用 onMounted 的回调最先运行
• 第二次调用的回调紧随其后
• 以此类推，不覆盖、不合并，全部保留

例如：

onMounted(() => console.log('A'))
onMounted(() => console.log('B'))
onMounted(() => console.log('C'))

输出一定是 A → B → C。

立即学习“前端免费学习笔记（深入）”；

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

不同钩子之间严格遵循生命周期时序

钩子函数的总体执行流程不可逆，不会因为注册位置靠后就提前触发：

• onBeforeMount 总是在 onMounted 之前执行
• onBeforeUpdate 总是在 onUpdated 之前执行
• onBeforeUnmount 总是在 onUnmounted 之前执行

即使你在 setup 末尾才写 onBeforeMount，在 mounted 回调里又写了 onBeforeUnmount，实际仍按「挂载前 → 挂载后 → 更新前 → 更新后 → 卸载前 → 卸载后」的固定链条运行。

父子组件中钩子交错执行，但各自内部仍守序

父组件和子组件的钩子不是“父全跑完再子”，而是按挂载依赖关系交错进行，但每个组件内部的多个同名钩子依然保持注册顺序：

• 父 beforeMount → 子 beforeMount → 子 mounted → 父 mounted
• 若子组件 setup 中注册了两个 onMounted，那这两个一定在子 mounted 阶段内按序执行
• 父组件的 onMounted 回调不会插队到子组件的两个 onMounted 中间

注意 setup 是注册入口，不能异步或延迟调用

所有 onXXX 必须在 setup 同步执行，否则 Vue 无法正确绑定时机：

• 不能放在 setTimeout 或 Promise.then 里调用
• 不能封装成函数后延迟执行
• 否则该钩子会被忽略，不触发