# Vue3（组合式 API + 响应式原理）

你的学习文档里这一章的定位是 `Vue3（组合式API + 响应式原理）`。这一章我按这个方向来拆，不再重复 Vue2 的 Options API 主线，而是重点转到 Vue3 的组合式写法和响应式思维。

## 学完后你应该掌握

- Vue3 和 Vue2 的核心差异
- `createApp`
- `setup()`
- `ref`
- `reactive`
- `toRef`
- `toRefs`
- `readonly`
- `computed`
- `watch`
- `watchEffect`
- `nextTick`
- 组合式 API 生命周期
- 模板 `ref`
- `props` 和 `emit`
- 组件 `v-model`
- `slot`
- `provide` / `inject`
- `expose`
- composable 的基本抽离方式
- `script setup`
- `defineProps`
- `defineEmits`
- `defineExpose`
- `Teleport`
- `Suspense`
- `Transition`
- 如何用 Vue3 写一个小型管理面板

## 这一章在解决什么

Vue2 更强调“选项式组织”。

Vue3 这一章要解决的是：

- 逻辑如何按功能组织，而不是按选项分散
- 响应式数据如何在 `setup()` 里组合
- 一段可复用逻辑如何抽成 composable
- 组件之间如何在组合式 API 下继续通信

## 全部知识点清单

### 基础入口

- `createApp`
- `setup()`
- `return`

### 响应式核心

- `ref`
- `reactive`
- `toRef`
- `toRefs`
- `readonly`
- `computed`
- `watch`
- `watchEffect`
- `nextTick`

### 生命周期与 DOM

- `onBeforeMount`
- `onMounted`
- `onBeforeUpdate`
- `onUpdated`
- `onBeforeUnmount`
- `onUnmounted`
- 模板 `ref`
- `expose`

### 组件通信

- `props`
- `emit`
- 组件 `v-model`
- `slot`
- `provide`
- `inject`

### 逻辑复用

- composable
- 异步状态管理
- `loading`
- `error`

### 工程化语法与内置组件

- `script setup`
- `defineProps`
- `defineEmits`
- `defineExpose`
- `Teleport`
- `Suspense`
- `Transition`

## 学习顺序

1. `createApp`、`setup()` 和 `ref`
2. `reactive` 和 `computed`
3. `watch` 和 `watchEffect`
4. 生命周期和模板 `ref`
5. `props` 和 `emit`
6. `slot` 与 `provide` / `inject`
7. composable 与异步状态
8. `toRefs`、`readonly` 等响应式辅助工具
9. `nextTick` 和组件 `v-model`
10. before 系列生命周期与 `expose`
11. `Teleport`、`Suspense`、`Transition`
12. `script setup` 宏
13. 综合小页面

## 练习目录

- [01-create-app-and-ref/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/01-create-app-and-ref/README.md)
- [02-reactive-and-computed/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/02-reactive-and-computed/README.md)
- [03-watch-and-watch-effect/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/03-watch-and-watch-effect/README.md)
- [04-lifecycle-and-template-ref/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/04-lifecycle-and-template-ref/README.md)
- [05-props-and-emits/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/05-props-and-emits/README.md)
- [06-slots-and-provide-inject/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/06-slots-and-provide-inject/README.md)
- [07-composable-and-async/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/07-composable-and-async/README.md)
- [08-final-dashboard/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/08-final-dashboard/README.md)
- [09-reactivity-helpers/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/09-reactivity-helpers/README.md)
- [10-next-tick-and-component-v-model/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/10-next-tick-and-component-v-model/README.md)
- [11-before-hooks-and-expose/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/11-before-hooks-and-expose/README.md)
- [12-built-in-components/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/12-built-in-components/README.md)
- [13-script-setup-macros/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/13-script-setup-macros/README.md)

## 说明

- 这一章只提供 `starter`，不提供 `answer`
- 为了降低门槛，练习使用浏览器 CDN 版本的 Vue3
- `13-script-setup-macros` 是 SFC 语法练习，文件是 `.vue` starter，不是直接双击运行的 HTML
- 如果后面你要把这一章升级成 `Vite + Vue3`，我可以再继续补工程化版本