多个组件复合 生命周期顺序

挂载阶段	更新阶段	销毁阶段
beforeCreate（父） Created（父） beforeMount（父） beforeCreate（子） created（子） beforeMount （子） mounted（子） Mounted（父）	beforeUpdate（父） beforeUpdate （子） updated （子） Updated（父）	beforeDestroy（父） beforeDestroy（子） destroyed（子） destroyed（父）

在Vue中，当多个组件复合使用时，它们的生命周期顺序遵循一定的规则，这些规则基于组件的父子关系和Vue的渲染机制。以下是Vue组件生命周期顺序的详细解析：

1. 父组件的生命周期

Vue组件的生命周期主要包括以下阶段（按顺序排列）：

beforeCreate：在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。此时组件的props、data、methods等都还未被初始化。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。

mounted：el被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内。

beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。但是要避免更改状态，因为这可能会导致无限更新循环。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

2. 子组件的生命周期

在父组件的beforeMount和mounted阶段之间，会插入子组件的生命周期钩子调用。具体顺序如下：

当父组件执行到beforeMount阶段时，会开始准备挂载，此时会检查是否有子组件需要挂载。

如果存在子组件，则按照子组件的定义顺序，依次执行子组件的beforeCreate、created、beforeMount和mounted阶段。

子组件的mounted阶段完成后，会回到父组件的mounted阶段，此时父组件会完成自己的挂载过程，包括将子组件的根元素挂载到父组件的模板中。

3. 组件销毁时的生命周期

当组件被销毁时，会首先调用子组件的beforeDestroy和destroyed钩子，然后再调用父组件的这两个钩子。这是因为子组件的销毁是父组件销毁过程的一部分，需要确保在父组件销毁之前，所有的子组件都已经被正确销毁。

总结

Vue中多个组件复合使用时，它们的生命周期顺序遵循先父后子、先创建后挂载、先更新后销毁的原则。了解这些顺序对于开发过程中进行性能优化、状态管理和错误排查等方面都非常重要。