d0d8be443b
- Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components. - Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue. - Included starter files for each exercise and detailed README documentation for guidance.
142 lines
4.2 KiB
Markdown
142 lines
4.2 KiB
Markdown
# 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`，我可以再继续补工程化版本
|