面试题：Vue生命周期钩子在父子组件间的执行顺序及原理

Question

当有一个父子组件结构时，父组件A包含子组件B，在页面渲染过程中，各个生命周期钩子（如beforeCreate、created、beforeMount、mounted等）在父子组件中的执行顺序是怎样的？请详细说明其背后的原理。

Answer 1

1. 执行顺序：

   • 父组件：beforeCreate -> created
   • 子组件：beforeCreate -> created -> beforeMount -> mounted
   • 父组件：beforeMount -> mounted

2. 原理：

   • beforeCreate和created阶段：在这两个阶段，组件实例正在被创建，还未开始挂载到DOM。父子组件在创建过程中，父组件先进入创建流程，触发beforeCreate和created钩子。然后子组件开始创建，同样依次触发beforeCreate和created钩子。因为子组件是父组件的一部分，需要在父组件的创建流程推进到一定阶段后，才开始子组件的创建。
   • beforeMount和mounted阶段：子组件先触发beforeMount钩子，此时虚拟DOM已经创建完成，但还未真正挂载到页面。接着子组件完成挂载，触发mounted钩子。只有子组件挂载完成后，父组件才继续推进挂载流程，触发beforeMount和mounted钩子。这是因为父组件的DOM结构可能依赖子组件的渲染结果，所以要确保子组件先挂载完成，父组件才能正确挂载。