Vue3 父子组件生命周期钩子执行顺序详解

旧日童话
645 阅读4分钟

在前端面试中，Vue3 的生命周期钩子函数是一个高频考点，尤其是父子组件嵌套时，生命周期钩子的执行顺序常常让面试者感到困惑。作为一名前端技术负责人，我经常遇到这样的情况：面试者能够背诵生命周期钩子的名称，却无法准确描述父子组件中它们的执行顺序。今天，我们就来彻底讲清楚 Vue3 中父子组件生命周期的执行顺序，从基础概念到实际应用，层层递进，深入浅出。

1. Vue3 生命周期钩子概览

Vue3 的生命周期钩子函数分为以下几个阶段：

  1. 创建阶段：

    • setup：组合式 API 的入口。
    • onBeforeMount：组件挂载之前。
    • onMounted：组件挂载完成。

  2. 更新阶段：

    • onBeforeUpdate：组件更新之前。
    • onUpdated：组件更新完成。

  3. 卸载阶段：

    • onBeforeUnmount：组件卸载之前。
    • onUnmounted：组件卸载完成。

  4. 其他钩子：

    • onErrorCaptured：捕获子组件错误。
    • onRenderTracked 和 onRenderTriggered：用于调试渲染行为。

2. 父子组件生命周期的执行顺序

在 Vue3 中，父子组件的生命周期钩子执行顺序遵循以下规则：

  1. 父组件先进入创建阶段，但不会完成挂载，而是等待子组件完成挂载。
  2. 子组件完成挂载后，父组件才会完成挂载。
  3. 更新和卸载阶段，父组件同样会等待子组件完成相应操作。

2.1 创建阶段的生命周期顺序

以下是一个父子组件的示例代码：

// 父组件
import { onBeforeMount, onMounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('父组件 - onBeforeMount');
    });

    onMounted(() => {
      console.log('父组件 - onMounted');
    });
  },
};

// 子组件
import { onBeforeMount, onMounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('子组件 - onBeforeMount');
    });

    onMounted(() => {
      console.log('子组件 - onMounted');
    });
  },
};

执行顺序：

  1. 父组件进入 onBeforeMount。
  2. 子组件进入 onBeforeMount。
  3. 子组件完成 onMounted。
  4. 父组件完成 onMounted。

输出结果：

复制

父组件 - onBeforeMount
子组件 - onBeforeMount
子组件 - onMounted
父组件 - onMounted

2.2 更新阶段的生命周期顺序

当父组件的数据发生变化时，父子组件的更新顺序如下：

// 父组件
import { onBeforeUpdate, onUpdated } from 'vue';

export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('父组件 - onBeforeUpdate');
    });

    onUpdated(() => {
      console.log('父组件 - onUpdated');
    });
  },
};

// 子组件
import { onBeforeUpdate, onUpdated } from 'vue';

export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('子组件 - onBeforeUpdate');
    });

    onUpdated(() => {
      console.log('子组件 - onUpdated');
    });
  },
};

执行顺序：

  1. 父组件进入 onBeforeUpdate。
  2. 子组件进入 onBeforeUpdate。
  3. 子组件完成 onUpdated。
  4. 父组件完成 onUpdated。

输出结果：

父组件 - onBeforeUpdate
子组件 - onBeforeUpdate
子组件 - onUpdated
父组件 - onUpdated

2.3 卸载阶段的生命周期顺序

当父组件卸载时，父子组件的卸载顺序如下：

// 父组件
import { onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('父组件 - onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('父组件 - onUnmounted');
    });
  },
};

// 子组件
import { onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('子组件 - onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('子组件 - onUnmounted');
    });
  },
};

执行顺序：

  1. 父组件进入 onBeforeUnmount。
  2. 子组件进入 onBeforeUnmount。
  3. 子组件完成 onUnmounted。
  4. 父组件完成 onUnmounted。

输出结果：

父组件 - onBeforeUnmount
子组件 - onBeforeUnmount
子组件 - onUnmounted
父组件 - onUnmounted

3. 为什么是这样的顺序？

Vue3 的生命周期钩子执行顺序是由其渲染机制决定的：

  1. 创建阶段：

    • 父组件需要先初始化，然后才能渲染子组件。
    • 子组件挂载完成后，父组件才能完成挂载。

  2. 更新阶段：

    • 父组件的数据变化会触发子组件的更新。
    • 子组件更新完成后，父组件才能完成更新。

  3. 卸载阶段：

    • 父组件卸载时，需要先卸载子组件，以确保资源释放的顺序正确。

4. 实际应用场景

4.1 数据初始化

在父组件的 onMounted 钩子中初始化数据，确保子组件在挂载时能够获取到正确的数据。

4.2 资源释放

在子组件的 onUnmounted 钩子中释放资源（如定时器、事件监听器等），避免内存泄漏。

4.3 调试父子组件交互

通过观察生命周期钩子的执行顺序，可以更好地理解父子组件的交互逻辑，便于调试复杂组件。

5. 总结

Vue3 中父子组件的生命周期钩子执行顺序遵循以下规则：

  1. 创建阶段：父组件先进入 onBeforeMount，子组件完成挂载后，父组件才完成挂载。
  2. 更新阶段：父组件先进入 onBeforeUpdate，子组件完成更新后，父组件才完成更新。
  3. 卸载阶段：父组件先进入 onBeforeUnmount，子组件完成卸载后，父组件才完成卸载。

理解这些顺序不仅有助于应对面试，更能帮助你在实际开发中更好地设计和调试 Vue3 组件。希望这篇文章能够帮助你彻底掌握 Vue3 父子组件的生命周期执行顺序！

如果你对 Vue3 生命周期还有疑问，欢迎在评论区留言讨论！

avatar
文章
阅读
粉丝