第12篇：Vue 3 生命周期钩子与应用场景

在组件的生命周期中，有多个关键时机可以执行特定的逻辑操作。Vue 3 提供了一系列生命周期钩子，让我们可以在组件的创建、挂载、更新和销毁过程中执行代码。本篇将详细介绍 Vue 3 的生命周期钩子及其应用场景。

1. 什么是生命周期钩子？

生命周期钩子是 Vue 提供的特殊函数，用于在组件生命周期的特定阶段运行代码。

生命周期阶段：

• 创建阶段：组件实例被创建。
• 挂载阶段：组件被挂载到 DOM。
• 更新阶段：组件的响应式数据发生变化。
• 销毁阶段：组件实例被销毁。

2. Vue 3 的生命周期钩子

在 Vue 3 中，使用组合式 API，可以通过 onXxx 形式的函数注册生命周期钩子。

常用生命周期钩子

• onBeforeMount：组件挂载到 DOM 之前调用。
• onMounted：组件挂载到 DOM 之后调用。
• onBeforeUpdate：响应式数据更新之前调用。
• onUpdated：响应式数据更新之后调用。
• onBeforeUnmount：组件卸载之前调用。
• onUnmounted：组件卸载之后调用。

3. 使用示例

完整生命周期示例

<template>
  <div>
    <h1>生命周期示例</h1>
    <button @click="toggle">切换显示</button>
    <Child v-if="showChild" />
  </div>
</template>

<script>
import { ref } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const showChild = ref(true);

    const toggle = () => {
      showChild.value = !showChild.value;
    };

    return {
      showChild,
      toggle
    };
  }
};
</script>

在 Child.vue 中：

<template>
  <div>子组件</div>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('子组件挂载完成');
    });

    onBeforeUnmount(() => {
      console.log('子组件即将卸载');
    });
  }
};
</script>

运行效果： 点击“切换显示”按钮，可以在控制台看到子组件挂载和卸载的日志。

4. 应用场景

（1）初始化操作

在 onMounted 钩子中进行组件初始化操作，如发送网络请求或设置定时器。

onMounted(() => {
  fetchData();
  console.log('组件已挂载');
});

（2）清理资源

在 onBeforeUnmount 或 onUnmounted 钩子中清理定时器、事件监听或其他资源。

onBeforeUnmount(() => {
  clearInterval(timer);
  console.log('资源已清理');
});

（3）响应数据变化

在 onUpdated 钩子中响应数据变化，例如日志记录或触发动画。

onUpdated(() => {
  console.log('组件已更新');
});

5. 生命周期钩子对比

以下是 Vue 3 组合式 API 和 Vue 2 选项式 API 的生命周期钩子对比：

6. 总结

在本篇中，你学习了 Vue 3 的生命周期钩子：

• onMounted 和 onUnmounted 等钩子的使用方法。
• 如何在不同生命周期阶段执行特定逻辑。
• Vue 2 和 Vue 3 生命周期钩子的对应关系。

下一篇中，我们将学习如何使用 Vue 进行单元测试与调试。