50 lines
943 B
Markdown
50 lines
943 B
Markdown
# 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 监听数据变化
|