Vue 父子组件钩子的执行顺序是什么

结论先行：

组件的加载顺序是自上而下的，也就是先加载父组件，再递归地加载其所有的子组件。

因此， 先执行父组件 beforeCreate 钩子  =>  父组件 created 钩子  =>  父组件 beforeMount 钩子  =>  子组件 beforeCreate 钩子  =>  子组件 created 钩子  =>  子组件 beforeMount 钩子

而组件渲染顺序是按照深度优先遍历的方式，也就是先渲染最深层的子组件，再依次向上渲染其父组件。 

因此，先执行子组件 mounted 钩子  =>  父组件 mounted 钩子

更新阶段、销毁阶段和渲染顺序相同

父组件 beforeUpdate 钩子  =>  子组件 beforeUpdate 钩子  =>  子组件 updated 钩子  =>  父组件 updated 钩子

 父组件 beforeDestroy 钩子  =>  子组件 beforeDestroy 钩子  =>  子组件 destroyed 钩子  =>  父组件 destroyed 钩子

被 keep-alive 缓存的组件在组件被激活或停用时，执行的生命周期钩子会发生变化。

激活 (activated) 缓存中的组件时，父组件 activated 钩子  =>  子组件 activated 钩子   

 停用 (deactivated) 缓存中的组件时，父组件 deactivated 钩子  =>  子组件 deactivated 钩子

 

具体分析： 

在 Vue 中，父子组件之间的生命周期钩子执行顺序如下：

1、创建和挂载阶段

父组件 beforeCreate 钩子  =>  父组件 created 钩子  =>  父组件 beforeMount 钩子  =>  子组件 beforeCreate 钩子  =>  子组件 created 钩子  =>  子组件 beforeMount 钩子  =>  子组件 mounted 钩子  =>  父组件 mounted 钩子

2、更新阶段

父组件 beforeUpdate 钩子  =>  子组件 beforeUpdate 钩子  =>  子组件 updated 钩子  =>  父组件 updated 钩子

3、销毁阶段

父组件 beforeDestroy 钩子  =>  子组件 beforeDestroy 钩子  =>  子组件 destroyed 钩子  =>  父组件 destroyed 钩子

在这个过程中，子组件的生命周期钩子的执行顺序总是在父组件的生命周期钩子之后。

在 keep-alive 组件中，由于缓存组件会被 keep-alive 管理，因此在组件被激活或停用时，执行的生命周期钩子会发生变化。

4、激活 (activated) 缓存中的组件时：

父组件 activated 钩子  =>  子组件 activated 钩子   

5、停用 (deactivated) 缓存中的组件时:

父组件 deactivated 钩子  =>  子组件 deactivated 钩子

需要注意的是，在 keep-alive 组件中，子组件的 mounted 钩子只会在组件被首次渲染时执行，当组件被缓存并再次激活时，子组件的 mounted 钩子不会再次执行，而是执行 activated 钩子。

同样，当组件被停用时，子组件的 destroyed 钩子不会立即执行，而是等到组件被销毁时才会执行。