简述Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？

八股文_Vue面试题 0 122

在 Vue 中，父组件和子组件都有一套完整的生命周期钩子函数。在 Vue 的生命周期中，父子组件的生命周期钩子执行顺序如下：

子组件：
- beforeCreate：实例初始化之前，数据观测和事件/生命周期方法的设置尚未开始。
- created：实例已经创建，数据观测和事件/生命周期方法已经设置好，但尚未挂载到 DOM。
- beforeMount：在挂载之前调用，模板和数据已经准备好，但 DOM 尚未渲染。
- mounted：挂载完成，DOM 已经渲染，可以访问到 DOM。
- beforeUpdate：数据更新时调用，DOM 还未更新。
- updated：数据更新并重新渲染 DOM 后调用。
- beforeDestroy：组件销毁之前调用。
- destroyed：组件销毁后调用。
父组件：
- 父组件的生命周期钩子会在子组件的相应钩子之前或之后执行，具体顺序如下：

父组件与子组件生命周期的关系
- 父组件的生命周期钩子在大多数情况下会先于子组件执行，尤其是在组件创建和挂载阶段。父组件创建后会创建子组件，父组件的 beforeMount 会在子组件的 beforeMount 之前触发。
- 子组件挂载后，父组件的 mounted 钩子会在子组件的 mounted 钩子之后执行。这个顺序是因为父组件先渲染完毕，而子组件需要在父组件完成挂载后再挂载。
具体的钩子函数作用
- beforeCreate 和 created 主要用于初始化组件的数据、事件、监听器等。子组件在父组件之前执行这些钩子，通常是在父组件实例创建之前，子组件尚未渲染出来时。
- beforeMount 和 mounted 主要用于 DOM 渲染时的操作。在子组件的 mounted 钩子执行完之后，父组件的 mounted 钩子才会执行，这时 DOM 已经完成渲染。
组件更新时的钩子顺序
- 当组件的响应式数据发生变化时，Vue 会在 beforeUpdate 钩子中进行 DOM 更新的前准备。子组件会先执行 beforeUpdate，然后是父组件的 beforeUpdate，更新完成后，子组件的 updated 会在父组件的 updated 之后执行。
销毁时的钩子顺序
- 在组件销毁过程中，子组件的 beforeDestroy 会在父组件的 beforeDestroy 之前执行，而销毁完成后，子组件的 destroyed 会在父组件的 destroyed 之后执行。

Vue 中父子组件的生命周期钩子执行顺序是一个由创建、更新到销毁的过程，父组件的生命周期钩子通常在子组件之前触发，且子组件的钩子函数会在父组件的钩子函数之后执行。理解这一顺序有助于更好地掌控父子组件之间的交互与数据流动。