当前位置：首页 > article >正文

Vue.js 什么是 Composition API？

article 2025/3/19 19:19:22

Vue.js 什么是 Composition API？

今天我们来聊聊 Vue 3 引入的一个重要特性：组合式 API（Composition API）。如果你曾在开发复杂的 Vue 组件时感到代码难以维护，那么组合式 API 可能正是你需要的工具。

什么是组合式 API？

组合式 API 是 Vue 3 提供的一套基于函数的 API，允许开发者以更灵活的方式组织组件逻辑。与传统的选项式 API（Options API）不同，组合式 API 使我们能够根据功能将相关代码组合在一起，提升代码的可读性和可维护性。

为什么引入组合式 API？

在使用选项式 API 时，组件的逻辑通常分散在不同的选项中（如 data、methods、computed 等）。当组件变得复杂时，相关逻辑可能被拆散，导致代码难以阅读和维护。组合式 API 通过允许我们将相关逻辑集中在一起，解决了这一问题。

组合式 API 的核心概念

setup 函数

setup 是组合式 API 的入口函数。它在组件实例创建之前执行，用于初始化组件的 props、状态和逻辑。

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

// 定义一个响应式变量
const count = ref(0);

// 定义一个方法来更新变量
function increment() {
  count.value++;
}
</script>

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

在上述示例中，setup 函数使用 ref 创建了一个响应式变量 count，并定义了一个方法 increment 来更新该变量。

响应式 API

组合式 API 提供了 ref 和 reactive 等函数来创建响应式状态：
- ref：用于创建包含单一值的响应式引用。
```
const count = ref(0);
console.log(count.value); // 输出: 0
```
- reactive：用于创建包含多个属性的响应式对象。
```
const user = reactive({
  name: 'Alice',
  age: 25
});
console.log(user.name); // 输出: Alice
```
生命周期钩子

在组合式 API 中，生命周期钩子以函数形式提供，例如 onMounted、onUpdated 和 onUnmounted。
```
import { onMounted } from 'vue';

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