【vue高频面试题—生命周期篇】：vue 子组件和父组件执行顺序

在 Vue 的生命周期中，父组件和子组件的钩子函数的执行顺序类似于js事件的冒泡和捕获顺序

1. 挂载阶段（组件创建并插入 DOM）

当父组件和子组件一起加载时：

1. 父组件的 beforeCreate 钩子执行
2. 父组件的 created 钩子执行
3. 子组件的 beforeCreate 钩子执行
4. 子组件的 created 钩子执行
5. 子组件的 beforeMount 钩子执行
6. 子组件的 mounted 钩子执行
7. 父组件的 beforeMount 钩子执行
8. 父组件的 mounted 钩子执行

总结挂载顺序：
父组件 beforeCreate → 父组件 created → 子组件生命周期 → 父组件继续。

2. 更新阶段（数据更新导致重新渲染）

当父组件的数据发生变化并重新渲染时：

1. 父组件的 beforeUpdate 钩子执行
2. 子组件的 beforeUpdate 钩子执行
3. 子组件的 updated 钩子执行
4. 父组件的 updated 钩子执行

总结更新顺序：
父组件 beforeUpdate → 子组件生命周期 → 父组件继续。

3. 销毁阶段（组件被销毁）

当父组件销毁时，会触发子组件的销毁过程：

1. 父组件的 beforeDestroy 钩子执行
2. 子组件的 beforeDestroy 钩子执行
3. 子组件的 destroyed 钩子执行
4. 父组件的 destroyed 钩子执行

总结销毁顺序：
父组件 beforeDestroy → 子组件生命周期 → 父组件继续。

总结：

• 挂载阶段（类似捕获）：
  在挂载过程中，父组件的初始化（beforeCreate 和 created）优先执行，子组件的挂载过程（beforeMount 和 mounted）完成后，父组件再继续完成自身的挂载。

• 更新阶段（类似冒泡）：
  数据更新时，父组件的 beforeUpdate 先执行，然后进入子组件的更新阶段（beforeUpdate 和 updated），最后回到父组件的 updated。

• 销毁阶段（类似捕获）：
  父组件销毁时，子组件的销毁过程（beforeDestroy 和 destroyed）优先完成，最后父组件执行自身的销毁钩子。