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

在 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 钩子不会立即执行，而是等到组件被销毁时才会执行。