Vue 3 组合式 API 中的组件生命周期函数详解

Vue 3 组合式 API 中的组件生命周期函数详解

Vue 3 引入了组合式 API（Composition API），相比于选项式 API（Options API），它更加灵活且易于复用。在组件的开发中，生命周期函数是必不可少的一部分，用于在特定的阶段执行逻辑操作。本文将详细讲解 Vue 3 组合式 API 的生命周期函数及其相关知识点，并通过语法糖实现相关示例。

什么是生命周期函数？

Vue 组件从创建到销毁的过程中，会经历一系列的生命周期阶段。每个阶段会触发相应的生命周期函数，让开发者可以在这些函数中执行逻辑，比如初始化数据、订阅事件、清理资源等。

在 Vue 3 中，生命周期函数以组合式 API 的方式，通过 onXXX 函数实现，这些函数是 Vue 提供的全局 API。

Vue 3 组件生命周期函数一览

以下是 Vue 3 组合式 API 的生命周期函数，以及它们的触发时机和典型用途：

组合式 API 的生命周期函数使用

生命周期函数通过直接调用 onXXX 函数实现。在组合式 API 中，这些函数需要在 setup() 函数内部调用。

1. onBeforeMount 和 onMounted 示例

<script setup>
import { ref, onBeforeMount, onMounted } from 'vue';

// 定义一个响应式数据
const message = ref('');

// 生命周期逻辑
onBeforeMount(() => {
  console.log('组件即将挂载');
  message.value = '组件挂载之前初始化的数据';
});

onMounted(() => {
  console.log('组件已挂载');
  // 模拟数据请求
  setTimeout(() => {
    message.value = '组件挂载后获取的数据';
  }, 1000);
});
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

2. onBeforeUpdate 和 onUpdated 示例

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue';

const count = ref(0);

onBeforeUpdate(() => {
  console.log('组件更新前的 count:', count.value);
});

onUpdated(() => {
  console.log('组件更新后的 count:', count.value);
});

const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

3. onBeforeUnmount 和 onUnmounted 示例

<script setup>
import { ref, onBeforeUnmount, onUnmounted } from 'vue';

const timer = ref(null);

// 创建一个计时器
onMounted(() => {
  timer.value = setInterval(() => {
    console.log('计时器运行中...');
  }, 1000);
});

// 清理计时器
onBeforeUnmount(() => {
  console.log('组件即将卸载，清理资源中...');
  clearInterval(timer.value);
});

onUnmounted(() => {
  console.log('组件已卸载');
});
</script>

<template>
  <div>
    <p>计时器正在运行...</p>
  </div>
</template>

4. 捕获错误：onErrorCaptured 示例

<script setup>
import { ref, onErrorCaptured } from 'vue';

const hasError = ref(false);

onErrorCaptured((err, instance, info) => {
  console.error('捕获到错误:', err);
  console.warn('错误信息:', info);
  hasError.value = true;
  return false; // 返回 false 阻止错误冒泡
});
</script>

<template>
  <div>
    <p v-if="hasError">发生错误，请稍后重试。</p>
    <p v-else>一切正常</p>
  </div>
</template>

生命周期函数的最佳实践

1. 清理资源：在组件销毁时，清理如定时器、事件监听器、WebSocket 连接等资源，避免内存泄漏。
2. 模块化逻辑：将复杂的逻辑封装成独立的函数或自定义 Hook，使代码更易维护。
3. 错误捕获：使用 onErrorCaptured 捕获错误，提升用户体验。
4. 依赖注入：如果组件间有复杂的依赖关系，可以通过 Vue 的 provide/inject API 在父子组件之间共享数据。

总结

Vue 3 的组合式 API 提供了更清晰和灵活的方式管理组件生命周期函数。通过 onXXX 函数，我们可以更方便地处理每个阶段的逻辑，同时实现代码复用与模块化。

完整代码示例如下，欢迎复制到本地试用并优化：

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

const message = ref('Hello Vue 3!');

// 生命周期逻辑
onMounted(() => {
  console.log('组件挂载');
  message.value = 'Vue 3 的组合式 API 很棒！';
});

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

onUnmounted(() => {
  console.log('组件卸载');
});
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>