面试题：Vue父子组件生命周期钩子执行顺序及场景应用

Question

请详细阐述Vue父子组件在创建、挂载、更新、销毁阶段生命周期钩子函数的执行顺序，并举例说明在实际开发中，利用父子组件生命周期钩子执行顺序可以解决哪些常见问题。

Answer 1

Vue父子组件生命周期钩子函数执行顺序

1. 创建阶段： 父组件 beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 子组件 mounted -> 父组件 mounted。
2. 更新阶段： 父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated。
3. 销毁阶段： 父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed。

实际开发中利用该顺序解决的常见问题

1. 数据初始化与父子组件协同： 在创建阶段，父组件先创建和挂载，然后子组件创建和挂载。例如，在一个树形菜单组件中，父组件可以在 created 钩子中获取菜单数据，然后通过 props 传递给子组件。子组件在 created 或 mounted 钩子中根据接收到的数据进行渲染和初始化操作。

<template>
  <div>
    <parent-component></parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';
export default {
  components: {
    ParentComponent
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component :menu-data="menuData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      menuData: []
    };
  },
  created() {
    // 模拟获取菜单数据
    this.menuData = [
      { label: '菜单1', children: [] },
      { label: '菜单2', children: [] }
    ];
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in menuData" :key="item.label">{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['menuData'],
  mounted() {
    console.log('子组件已挂载，菜单数据:', this.menuData);
  }
}
</script>

2. 父子组件更新同步： 在更新阶段，父组件 beforeUpdate 先触发，然后子组件 beforeUpdate，子组件更新完成后父组件 updated 触发。比如在一个表格组件中，父组件控制表格的筛选条件，当筛选条件变化时，父组件 beforeUpdate 钩子中可以做一些数据备份或预操作，子组件 beforeUpdate 钩子可以根据新的 props 数据做一些准备工作，在子组件更新完成后，父组件 updated 钩子可以做一些全局的更新后操作，如更新统计信息等。
3. 资源释放与清理： 在销毁阶段，父组件 beforeDestroy 先触发，然后子组件 beforeDestroy，子组件销毁完成后父组件 destroyed 触发。例如，在一个包含地图组件的父组件中，地图组件作为子组件，当父组件要被销毁时，父组件 beforeDestroy 钩子可以通知子组件地图组件进行资源释放（如取消地图加载、清除地图事件监听等），子组件在 beforeDestroy 和 destroyed 钩子中完成相应的清理工作，父组件在 destroyed 钩子中可以做一些全局的清理，如释放相关的内存引用等。