面试题：Vue 中子组件和父组件钩子的执行顺序是什么？

在 Vue 中，父子组件的生命周期钩子执行顺序是固定的，了解这些顺序对于理解组件的初始化、更新和销毁过程非常重要。以下是父子组件生命周期钩子的执行顺序：

1. 组件加载时的生命周期钩子顺序

当父组件渲染并包含子组件时，生命周期钩子的执行顺序如下：

父组件：beforeCreate
父组件：created
父组件：beforeMount
子组件：beforeCreate
子组件：created
子组件：beforeMount
子组件：mounted
父组件：mounted

说明：

父组件会先执行到 beforeMount，然后开始渲染子组件。
子组件完成挂载后，父组件才会完成挂载。

2. 组件更新时的生命周期钩子顺序

当父组件的数据发生变化导致父子组件重新渲染时，生命周期钩子的执行顺序如下：

父组件：beforeUpdate
子组件：beforeUpdate
子组件：updated
父组件：updated

说明：

父组件先触发 beforeUpdate，然后子组件更新。
子组件更新完成后，父组件才会触发 updated。

3. 组件销毁时的生命周期钩子顺序

当父组件销毁时，包含的子组件也会被销毁，生命周期钩子的执行顺序如下：

父组件：beforeDestroy
子组件：beforeDestroy
子组件：destroyed
父组件：destroyed

说明：

父组件先触发 beforeDestroy，然后子组件销毁。
子组件销毁完成后，父组件才会触发 destroyed。

4. 完整的生命周期钩子顺序

以下是一个完整的父子组件生命周期钩子执行顺序的示例：

父组件：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  beforeCreate() {
    console.log('Parent beforeCreate');
  },
  created() {
    console.log('Parent created');
  },
  beforeMount() {
    console.log('Parent beforeMount');
  },
  mounted() {
    console.log('Parent mounted');
  },
  beforeUpdate() {
    console.log('Parent beforeUpdate');
  },
  updated() {
    console.log('Parent updated');
  },
  beforeDestroy() {
    console.log('Parent beforeDestroy');
  },
  destroyed() {
    console.log('Parent destroyed');
  },
};
</script>

子组件：

<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('Child beforeCreate');
  },
  created() {
    console.log('Child created');
  },
  beforeMount() {
    console.log('Child beforeMount');
  },
  mounted() {
    console.log('Child mounted');
  },
  beforeUpdate() {
    console.log('Child beforeUpdate');
  },
  updated() {
    console.log('Child updated');
  },
  beforeDestroy() {
    console.log('Child beforeDestroy');
  },
  destroyed() {
    console.log('Child destroyed');
  },
};
</script>

输出结果：

加载时：

   Parent beforeCreate
   Parent created
   Parent beforeMount
   Child beforeCreate
   Child created
   Child beforeMount
   Child mounted
   Parent mounted

更新时：

   Parent beforeUpdate
   Child beforeUpdate
   Child updated
   Parent updated

销毁时：

   Parent beforeDestroy
   Child beforeDestroy
   Child destroyed
   Parent destroyed

5. 总结

加载时：父组件先初始化，子组件挂载完成后，父组件才完成挂载。
更新时：父组件先触发更新，子组件更新完成后，父组件才完成更新。
销毁时：父组件先触发销毁，子组件销毁完成后，父组件才完成销毁。

理解这些顺序有助于更好地控制组件的生命周期行为，尤其是在处理父子组件之间的数据传递和状态管理时。

THE END

Vue 进阶面试题