Vue 生命周期执行顺序是怎么样的？父子组件嵌套场景下的踩坑总结-Vue.js-PHP中文网

Vue父子组件生命周期钩子严格交错执行：父beforeCreate→created→beforeMount，子beforeCreate→created→beforeMount→mounted，父mounted；v-if切换时子组件完整重建，setup同步串行且等效created。

vue 生命周期执行顺序是怎么样的？父子组件嵌套场景下的踩坑总结

Vue 的生命周期执行顺序在单组件中是明确的，但在父子组件嵌套时，由于挂载、更新、销毁的触发时机存在依赖关系，容易出现“父先于子”或“子早于父”的错觉，实际是有严格规则的。关键要分清 创建、挂载、更新、卸载 四个阶段，且父子的钩子是交错执行的，不是简单地“父→子”或“子→父”。

以首次渲染为例，从 new Vue() 到页面显示，钩子按如下顺序同步执行：

注意：父的 beforeMount 在子的 beforeMount 之前，但父的 mounted 一定在子的 mounted 之后。这是因为父组件模板编译后遇到子组件占位符，会暂停自身挂载流程，先完成子组件的完整初始化和挂载，再继续父的 mounted。

很多问题源于在错误的钩子里访问未就绪的数据或 DOM：

vue-admin-change-reviewer

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

下载

在父组件 created 中调用 $refs.child 方法？ —— ❌ 不行。此时子组件尚未创建，$refs 为空；应在父的 mounted 或子的 mounted 后通过事件通知。
子组件 created 中直接 this.$parent.xxx？ —— ✅ 可以访问父组件 data / methods，但父的 data 已初始化，props 也已解析完毕；但注意：此时 DOM 还没生成，不能操作 $el。
子组件 mounted 中读取父传来的 prop 并立即操作 DOM？ —— ⚠️ 要小心异步更新。若 prop 是响应式对象且父刚 set，可能因 nextTick 延迟导致子 mounted 时值未更新；建议配合 watch 或 onUpdated（Vue 3）监听变化。

当用 v-if 控制子组件显隐时，销毁和重建会触发完整的生命周期，但父子钩子顺序依然守序：

v-if="false" 触发：子 beforeDestroy → destroyed（Vue 2）/ beforeUnmount → unmounted（Vue 3）→ 父无变化
v-if="true" 重建时：父不会重新 created/mounted，仅子走完整流程（beforeCreate → ... → mounted）
坑点：若父组件在 data 中定义了子组件需依赖的初始配置，但该配置在父 created 后被异步修改（如接口返回），而子组件只在 created 里读了一次，就会拿不到最新值 —— 应改用 computed 或 watch 监听 props/data 变化。

setup() 函数本身相当于 beforeCreate + created 的合并体，在其中执行的同步代码，执行时机与 Vue 2 的 created 一致：

父 setup 执行 → 子 setup 执行（父子 setup 是同步串行的）
onBeforeMount / onMounted 等组合式钩子，仍遵循与 Options API 相同的父子时序
特别注意：useXXX 自定义 Hook 内部的 onMounted，其回调会在对应组件的 onMounted 之后执行，但仍是组件自身的生命周期上下文 —— 不会跨组件乱序。

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！