简述Vue 子组件和父组件执行顺序？

八股文_Vue面试题 0 155

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

父组件：
- beforeCreate：父组件实例被创建之前，数据观测和事件/生命周期方法的设置尚未开始。
- created：父组件实例已经创建，数据观测和事件/生命周期方法已经设置好，但尚未挂载到 DOM。
- beforeMount：在父组件挂载之前调用，模板和数据已经准备好，但 DOM 尚未渲染。
- mounted：父组件挂载完成，DOM 已经渲染，可以访问到 DOM。
子组件：
- beforeCreate：子组件实例创建之前，数据观测和事件/生命周期方法的设置尚未开始。
- created：子组件实例已经创建，数据观测和事件/生命周期方法已经设置好，但尚未挂载到 DOM。
- beforeMount：在子组件挂载之前调用，模板和数据已经准备好，但 DOM 尚未渲染。
- mounted：子组件挂载完成，DOM 已经渲染，可以访问到 DOM。

父组件与子组件生命周期的关系
- 创建阶段：
  - 当父组件实例化时，子组件的生命周期钩子会比父组件的生命周期钩子稍后执行。首先会执行父组件的 beforeCreate 和 created，然后是子组件的相应生命周期钩子。
  - 在子组件被创建后，它会被父组件渲染并挂载，因此父组件的 beforeMount 会在子组件的 beforeMount 之前触发。
挂载阶段：
- 父组件的 mounted 会在子组件的 mounted 之后触发，因为 Vue 是按照父子组件的层级关系进行渲染的，父组件会在子组件渲染后才会完成挂载。
更新阶段：
- 当数据变化时，父子组件的 beforeUpdate 和 updated 钩子会按照相同的顺序执行。首先是父组件的 beforeUpdate，然后是子组件的 beforeUpdate，接着子组件的 updated 会在父组件的 updated 后执行。
销毁阶段：
- 在组件销毁时，子组件会先销毁，然后父组件销毁。销毁顺序与挂载顺序相反。子组件的 beforeDestroy 会在父组件的 beforeDestroy 之前触发，销毁完毕后，子组件的 destroyed 会在父组件的 destroyed 后执行。

Vue 中父子组件的生命周期钩子函数按顺序依次执行。父组件的生命周期钩子会稍早于子组件的钩子执行，尤其是在创建和挂载阶段，子组件的钩子会在父组件钩子之后执行。理解这一顺序有助于在父子组件之间进行数据传递和事件监听时更好地控制应用的行为。