vue子组件生命周期的执行顺序

在 Vue 中，子组件的生命周期钩子函数的执行顺序受父组件的影响，通常遵循**"先创建子组件，后创建父组件；先销毁父组件，后销毁子组件"**的原则。

---

1. 组件创建（挂载）阶段

当父组件挂载时，子组件的生命周期钩子执行顺序如下：

执行顺序

1. 父组件的 beforeCreate

2. 父组件的 created

3. 父组件的 beforeMount

4. 子组件的 beforeCreate

5. 子组件的 created

6. 子组件的 beforeMount

7. 子组件的 mounted

8. 父组件的 mounted

说明

• 先创建 父组件的实例 （beforeCreate 和 created），但此时模板还未编译，子组件还未初始化。

• 在 父组件的 beforeMount 过程中，Vue 发现了子组件标签，于是开始初始化子组件。

• 子组件的 beforeCreate 和 created 先执行 ，然后子组件挂载到 DOM，触发 mounted。

• 子组件 mounted 结束后，才执行父组件的 mounted。

---

2. 组件更新（更新）阶段

当父组件的 data 发生变化，触发重新渲染时，执行顺序如下：

执行顺序

1. 父组件的 beforeUpdate

2. 子组件的 beforeUpdate

3. 子组件的 updated

4. 父组件的 updated

说明

• 由于父组件的 data 变更，先触发 父组件的 beforeUpdate。

• 发现子组件的 props 可能也受影响，因此进入 子组件的 beforeUpdate。

• 子组件完成更新后，执行 子组件的 updated。

• 最后，执行 父组件的 updated。

---

3. 组件销毁（卸载）阶段

当父组件被销毁时，子组件的生命周期钩子执行顺序如下：

执行顺序

1. 父组件的 beforeDestroy

2. 子组件的 beforeDestroy

3. 子组件的 destroyed

4. 父组件的 destroyed

说明

• 销毁时是"先父后子"调用 beforeDestroy，但先销毁子组件，再销毁父组件。

• 子组件 beforeDestroy 先执行，随后 destroyed 触发。

• 最后执行 父组件的 destroyed。

---

总结

完整生命周期执行顺序

阶段	父组件	子组件
创建前	beforeCreate	-
创建后	created	-
挂载前	beforeMount	-
子组件创建前	-	beforeCreate
子组件创建后	-	created
子组件挂载前	-	beforeMount
子组件挂载后	-	mounted
父组件挂载后	mounted	-
更新前	beforeUpdate	beforeUpdate
更新后	updated	updated
销毁前	beforeDestroy	beforeDestroy
销毁后	destroyed	destroyed

核心原则

1. 子组件的 beforeCreate、created、beforeMount 在父组件 beforeMount 之后执行。

2. 子组件的 mounted 在父组件 mounted 之前执行。

3. 子组件的 beforeDestroy、destroyed 在父组件 beforeDestroy 之后执行（即先销毁子组件，再销毁父组件）。

这个顺序对于组件通信、数据流管理等很重要，尤其在 mounted 钩子里可能需要访问子组件的 DOM 或数据时，需要注意时机。

---

如果你是用 Vue 3，beforeDestroy 和 destroyed 被替换为 onBeforeUnmount 和 onUnmounted，但执行顺序逻辑仍然一样。