vue父子组件生命周期

在 Vue 中，每个组件都有它自己的生命周期钩子函数，可以让我们在组件不同阶段添加自定义逻辑。钩子函数可以分为两大类：实例化钩子和更新钩子。其中，实例化钩子只会在组件初始化时被调用一次，而更新钩子会在组件数据发生变化时被调用。

在父子组件中，父组件和子组件都有自己的生命周期钩子函数。子组件的生命周期钩子函数会在父组件中调用，而且它们的执行顺序也是有一定规律的。

父组件生命周期钩子函数的执行顺序如下：

1. `beforeCreate`
2. `created`
3. `beforeMount`
4. `mounted`

子组件生命周期钩子函数的执行顺序如下：

1. `beforeCreate`
2. `created`
3. `beforeMount`
4. `mounted`

注：父组件的 `beforeMount` 和 `mounted` 钩子函数会在子组件的相应钩子函数执行完毕后才会被调用。

另外，当父组件的数据发生变化时，子组件也会相应地触发一些更新钩子函数。子组件的更新钩子函数的执行顺序如下：

1. `beforeUpdate`
2. `updated`

需要注意的是，如果子组件中定义了 `activated` 和 `deactivated` 钩子函数，它们只会在使用 `<keep-alive>` 包裹时被调用。具体执行顺序如下：

1. `deactivated`（在组件离开缓存时调用）
2. 父组件更新
3. `activated`（在组件进入缓存时调用）