Vue3 快速入门
零基础
本课程的目标不是把 Vue3 文档重新讲一遍，而是把大学生最常用的入门路径整理出来：什么时候该用 ref，什么时候该用 reactive，以及 <script setup> 为什么比旧写法更推荐。学完这门课，你应该能独立写出课程展示页、作品集卡片、简单表单和基础列表交互。
你将学会什么
Section titled “你将学会什么”- 建立 Vue3 响应式直觉
- 掌握
<script setup>的基本写法 - 能独立完成表单、列表和组件通信
- 减少“数据改了但页面没更新”这类新手问题
- 会写基础 HTML 和 CSS
- 了解 JavaScript 的变量、函数、对象与数组
- 建议先完成 Tailwind 实战课程，本课程示例会用到少量样式类
| 章节 | 内容 |
|---|---|
| 1. Composition API 与 script setup | 从 Options API 到组合式写法，写出最小组件 |
| 2. 响应式与计算属性 | ref、reactive 的选用与 computed 的边界 |
| 3. 列表、条件渲染与表单 | v-for、v-if、@click 与 v-model |
| 4. 组件通信 | props 与 $emit 的最小模式、拆分时机 |
| 5. 生命周期、侦听器与样式 | onMounted、watch 的边界与样式作用域 |
| 6. 实战清单与排错 | 学习顺序、常见坑、路由与接口请求 |
学习路线建议
Section titled “学习路线建议”- 如果时间有限，先完成 1、2、3 章，足以写出课程展示页与作品集卡片
- 每章末尾都有 3 道小测验，答错时解析会说明原因
ref 和 reactive 到底怎么选？
Section titled “ref 和 reactive 到底怎么选？”简单值用 ref，对象或数组用 reactive。ref 通过 .value 读写，适合字符串、数字、布尔值；reactive 适合多个字段一起变化的表单或列表，比如你处理的对象表单。两者可以混用，不需要统一成一种。详见响应式与计算属性。
<script setup> 比 Options API 好在哪？
Section titled “<script setup> 比 Options API 好在哪？”<script setup> 样板代码更少，TypeScript 支持更好，逻辑直接以变量和函数形式组织。它属于 Composition API，按功能组织代码：同一个功能的逻辑不会被拆到 data、methods、computed 等多个选项里，读代码时不用来回跳。见Composition API 与 script setup。
父子组件之间怎么通信？
Section titled “父子组件之间怎么通信？”最小模式是父传子用 props，子传父用 $emit。父组件用 defineProps 声明接收的数据，子组件用 defineEmits 声明事件并调用 emit 回传。需要跨组件共享复杂状态时，再考虑 Pinia 或 provide/inject。见组件通信。
什么时候该用 computed，什么时候该用普通函数？
Section titled “什么时候该用 computed，什么时候该用普通函数？”需要根据已有状态算出新值并显示时用 computed，例如列表筛选统计、根据表单输入生成摘要。会主动修改其他状态、依赖异步副作用的逻辑不要用 computed，改用普通函数。详见响应式与计算属性。
- 响应式基础——ref 与 reactive 的官方讲解
- 计算属性——computed 与普通函数的边界
- Props——父组件向子组件传值的官方文档
- 组件事件——$emit 与 defineEmits 的官方说明
相关课程
- Tailwind 实战
用原子类快速完成布局与视觉，少写自定义 CSS。
- 工程化实践
把课程作业升级成可运行、可维护、可协作的工程交付。