在前面的章节中，我们使用了 Vue 2 的选项式 API（Options API）。在 Vue 3 中，提供了全新的组合式 API，使代码更具可复用性、可读性和可维护性，特别是在复杂组件中。
1. 什么是组合式 API？
组合式 API 是 Vue 3 提供的一套全新的函数式 API，使用函数和逻辑组合的方式组织代码，而不是像选项式 API 那样将逻辑分散在 data、methods、computed 和 watch 等选项中。
核心特点：
- 代码更易复用：通过组合函数重用逻辑。
- 代码更清晰：相关逻辑写在一起，减少上下查找。
- 支持类型推导：更好地支持 TypeScript。
2. 基本使用：setup 函数
setup 函数是组合式 API 的入口，定义在组件的 <script> 部分中。
示例：基础用法
<template>
<div>
<h1>组合式 API 示例</h1>
<p>当前计数：{{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0); // 定义响应式数据
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
</script>解释：
ref：创建响应式数据，需要通过.value访问和修改值。setup：组件加载时会执行的函数，用于初始化数据和方法。- 返回值
return中的变量和方法会暴露给模板。
3. 使用 reactive 创建响应式对象
当数据对象包含多个属性时，可以使用 reactive 创建响应式对象。
示例：使用 reactive
<template>
<div>
<h1>响应式对象示例</h1>
<p>姓名：{{ state.name }}</p>
<p>年龄：{{ state.age }}</p>
<button @click="updateAge">年龄+1</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
name: '张三',
age: 25
});
const updateAge = () => {
state.age++;
};
return {
state,
updateAge
};
}
};
</script>区别：
ref适合单个数据，reactive适合对象。reactive创建的对象无需通过.value访问。
4. 使用 computed 计算属性
组合式 API 中可以使用 computed 函数创建计算属性。
示例：计算属性
<template>
<div>
<h1>计算属性示例</h1>
<p>原始年龄：{{ age }}</p>
<p>双倍年龄：{{ doubleAge }}</p>
<button @click="increment">年龄+1</button>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const age = ref(25);
const doubleAge = computed(() => age.value * 2);
const increment = () => {
age.value++;
};
return {
age,
doubleAge,
increment
};
}
};
</script>解释： computed 会根据依赖的值自动重新计算，类似于 Vue 2 中的计算属性。
5. 使用 watch 监听数据变化
在组合式 API 中，可以使用 watch 监听数据的变化。
示例：监听数据变化
<template>
<div>
<h1>监听数据示例</h1>
<input v-model="name" placeholder="输入姓名" />
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const name = ref('');
watch(name, (newVal, oldVal) => {
console.log(`姓名从 ${oldVal} 变为 ${newVal}`);
});
return {
name
};
}
};
</script>解释：
watch监听name的变化，并执行回调函数。
6. 总结
在本篇中，你学习了 Vue 3 组合式 API 的核心功能：
setup函数是组合式 API 的入口。ref和reactive用于创建响应式数据。computed创建计算属性。watch用于监听数据变化。
下一篇中，我们将学习 Vue 3 的生命周期钩子和应用场景，帮助你更好地掌控组件的运行时机。
