# Vue 3 组合式 API

## 学习目标
- 理解 Options API vs Composition API
- 掌握 setup 语法
- 学会使用响应式 API

## Composition API 简介

Composition API 是 Vue 3 推荐的编写方式，使用函数组合替代选项式配置。

## 基础用法

```vue
<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
    count.value++
}

onMounted(() => {
    console.log('组件已挂载')
})
</script>

<template>
    <button @click="increment">{{ count }} × 2 = {{ doubled }}</button>
</template>
```

## 常用 API

| API | 说明 |
|-----|------|
| `ref()` | 响应式变量 |
| `reactive()` | 响应式对象 |
| `computed()` | 计算属性 |
| `watch()` | 监听器 |
| `onMounted()` | 挂载后 |

## 动手练习

1. 使用 Composition API 实现计数器
2. 创建待办事项列表
3. 使用 watch 监听数据变化