这是关于 Vue 3 组合式 API 的入门教程。
## 什么是组合式 API
组合式 API（Composition API）是 Vue 3 引入的新写法，让我们能够更灵活地组织组件逻辑。
### 基础示例
下面是一个最简单的组合式 API 组件：
“`javascript
import { ref, computed } from ‘vue’
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, double, increment }
}
}
“`
## 核心 API
– **ref**: 定义响应式基本类型
– **reactive**: 定义响应式对象
– **computed**: 计算属性
– **watch**: 监听数据变化
– **onMounted**: 生命周期钩子
### 监听示例
“`javascript
import { ref, watch } from ‘vue’
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})
“`
## 与 Options API 的对比
组合式 API 解决了 Options API 的几个痛点：
1. 逻辑复用更优雅（用 composable 函数）
2. 相关代码可以组织在一起（而不是分散在 data/methods/computed 里）
3. TypeScript 支持更好
## 总结
组合式 API 不是要完全取代 Options API，而是提供一种更适合复杂组件的写法。