Vue.js生命周期钩子函数中父子组件初始化顺序探究

父组件先于子组件初始化，顺序为：父beforeCreate→父created→父beforeMount→子beforeCreate→子created→子beforeMount→子mounted→父mounted；props在子created中已可用，DOM操作应放在mounted配合nextTick。

Vue.js 中父子组件的初始化顺序由渲染流程和生命周期钩子的触发时机共同决定，理解这个顺序对避免数据依赖错误、合理组织初始化逻辑至关重要。

父组件先于子组件开始初始化

当父组件的模板中包含子组件标签时，Vue 的渲染器会先创建父组件实例，再递归处理其模板中的子组件。这意味着父组件的 beforeCreate 和 created 钩子一定早于任何子组件的对应钩子执行。

• 父组件进入 beforeCreate → created → beforeMount
• 此时子组件尚未被实例化，不能在父组件 created 中访问子组件的 ref 或 this.$refs.xxx
• 但可在父组件 created 中定义响应式数据、发起 API 请求、设置初始状态等

子组件在父组件 beforeMount 后、mounted 前完成挂载准备

父组件执行到 beforeMount 时，其虚拟 DOM 已生成，子组件的 VNode 也已创建完毕；紧接着 Vue 开始为子组件创建实例并调用其生命周期钩子。

• 执行顺序示例（简化）：
  父 beforeCreate → 父 created → 父 beforeMount →
    子 beforeCreate → 子 created → 子 beforeMount → 子 mounted →
  父 mounted
• 因此，父组件 mounted 中才能安全访问 this.$refs.child（前提是子组件已用 ref 命名）
• 子组件的 template 编译、响应式建立、指令绑定均在其 own beforeMount 前完成

props 传递发生在子组件 created 之前

Vue 在创建子组件实例时，会将父组件解析出的 props 数据作为参数传入子组件构造函数，因此子组件的 props 已在 created 钩子中可用，无需等待 mounted。

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

• 子组件 created 中可直接使用 this.$props 或解构后的 prop 值进行逻辑判断或计算
• 但注意：若 prop 是对象或数组，其内部属性变更不会触发子组件 created 再次执行——created 只执行一次
• 如需响应 prop 变化，应使用 watch 或 updated，而非依赖 created

异步操作与 nextTick 的典型配合场景

当需要在父子组件都完成 DOM 渲染后执行操作（例如获取子组件真实 DOM 尺寸、聚焦输入框），mounted + this.$nextTick 是更稳妥的选择。

• 父组件 mounted 触发时，子组件 mounted 已完成，但浏览器可能还未完成最终渲染
• 在父 mounted 中调用 this.$nextTick(() => { /* 此时 DOM 确保更新 */ }) 可确保访问到完整的 DOM 结构
• 避免在 created 或 beforeMount 中操作 DOM —— 此时 $el 还不存在