一、组合式 API 是什么？
组合式 API（Composition API）是 Vue3 引入的全新特性，它允许开发者通过函数式的方式组织组件逻辑。相比于 Vue2 的选项式 API（Options API），组合式 API 更加灵活，特别适合处理复杂组件的逻辑复用和代码组织。
简单来说，组合式 API 的核心思想是：把相关的逻辑代码放在一起，而不是像选项式 API 那样分散在 data、methods、computed 等不同选项中。
示例：组合式 API 的基本结构
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 定义响应式数据
const count = ref(0);
// 定义方法
const increment = () => {
count.value++;
};
// 生命周期钩子
onMounted(() => {
console.log('组件挂载完成！');
});
</script>
<template>
<button @click="increment">点击计数：{{ count }}</button>
</template>
注释说明：
ref用于定义响应式数据。onMounted是 Vue3 的生命周期钩子，在组件挂载后执行。<script setup>是 Vue3 的语法糖，让组合式 API 更简洁。
二、Vue3 组合式 API 的生命周期钩子
在 Vue3 中，生命周期钩子以函数的形式提供，可以直接在 setup 中使用。以下是常用的生命周期钩子及其对应关系：
| Vue2 选项式 API | Vue3 组合式 API |
|---|---|
beforeCreate |
无直接对应（组合式 API 的 setup 替代） |
created |
无直接对应（组合式 API 的 setup 替代） |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeUnmount |
onBeforeUnmount |
unmounted |
onUnmounted |
activated |
onActivated（配合 <KeepAlive> 使用） |
deactivated |
onDeactivated（配合 <KeepAlive> 使用） |
示例：完整的生命周期钩子使用
<script setup lang="ts">
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from 'vue';
const message = ref('Hello, Vue3!');
onBeforeMount(() => {
console.log('组件即将挂载');
});
onMounted(() => {
console.log('组件已挂载');
});
onBeforeUpdate(() => {
console.log('数据即将更新');
});
onUpdated(() => {
console.log('数据已更新');
});
onBeforeUnmount(() => {
console.log('组件即将卸载');
});
onUnmounted(() => {
console.log('组件已卸载');
});
</script>
<template>
<div>{{ message }}</div>
</template>
注释说明：
- 每个钩子函数接收一个回调函数，在对应生命周期阶段执行。
onBeforeUpdate和onUpdated在数据变化时触发。onBeforeUnmount和onUnmounted在组件销毁时触发。
三、组合式 API 生命周期的使用场景
1. 数据初始化（onMounted）
在组件挂载后，通常需要从后端 API 获取数据。
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchUserData } from './api';
const userData = ref(null);
onMounted(async () => {
userData.value = await fetchUserData();
});
</script>
2. DOM 操作（onMounted）
如果需要操作 DOM 元素（如使用第三方库），应该在 onMounted 中进行。
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Chart from 'chart.js';
const chartRef = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
if (chartRef.value) {
new Chart(chartRef.value, {
type: 'line',
data: { /* 图表数据 */ },
});
}
});
</script>
<template>
<canvas ref="chartRef"></canvas>
</template>
3. 组件销毁时清理资源（onUnmounted）
如果使用了定时器、事件监听等，需要在组件卸载时清理，避免内存泄漏。
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
let timer: number;
onMounted(() => {
timer = setInterval(() => {
console.log('定时器运行中...');
}, 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
</script>
4. 动态组件缓存（onActivated / onDeactivated）
如果使用 <KeepAlive> 缓存组件，可以通过这两个钩子监听组件的激活/停用状态。
<script setup lang="ts">
import { onActivated, onDeactivated } from 'vue';
onActivated(() => {
console.log('组件被激活');
});
onDeactivated(() => {
console.log('组件被停用');
});
</script>
四、组合式 API 生命周期的优缺点
优点
- 逻辑复用更灵活：可以提取生命周期逻辑到单独的函数，便于复用。
- 代码组织更清晰：相关逻辑可以放在一起，而不是分散在不同选项中。
- 更好的 TypeScript 支持：组合式 API 天然适合 TypeScript，类型推断更友好。
缺点
- 学习成本较高：对于 Vue2 开发者，需要适应新的思维方式。
- 小型项目可能显得冗余：简单组件使用选项式 API 可能更直观。
注意事项
- 避免在
setup中直接进行异步操作，应该使用onMounted或其他生命周期钩子。 - 谨慎使用
onBeforeUpdate和onUpdated，它们会在每次数据变化时触发，可能导致性能问题。 - 清理副作用：如果使用了
setInterval、addEventListener等，一定要在onUnmounted中清理。
五、总结
Vue3 的组合式 API 让生命周期管理更加灵活，尤其适合复杂组件和大型项目。通过 onMounted、onUnmounted 等钩子，我们可以更精细地控制组件的各个阶段。
适用场景：
- 需要逻辑复用的组件。
- 需要精细控制生命周期的场景（如 DOM 操作、资源清理）。
- 使用 TypeScript 开发的项目。
不适用场景：
- 简单的展示型组件（选项式 API 可能更直观）。
如果你刚开始接触 Vue3，建议先熟悉组合式 API 的基本概念，再逐步应用到实际项目中。
评论