Vue 3 从 0 到 1
从脚手架与模板讲起,依次深入组件边界、生命周期、Proxy 依赖图、模板编译、路由与状态、请求层、TypeScript、内置组件与 SSR,最后落到性能、测试与部署。每节包含机制、代码与自测,关键节配算例与动手任务。
读完之后你能
- 独立跑通脚手架、路由、请求层到上线部署
- 说清声明式渲染与响应式的完整链路
- 判断组件边界、状态归属与重渲染来源
- 用编译产物与性能手段定位真实瓶颈
- 审出 AI 生成代码里的响应性陷阱
适合谁
- 会 JavaScript、想系统学 Vue 3 的前端
- 准备 Vue 面试、需要补工程链路的开发者
读前准备
- JavaScript 基础:变量、函数、数组方法、模块
- HTML 与 CSS 基础,会用 npm 与命令行
目录
建议按顺序阅读,每节末尾可跳转到对应题目自测
模块一 · 起步与基础
0 / 6- 0118 分钟
起步:用 Vite 跑通第一个 Vue 应用
从装环境到跑起第一个 SFC,讲清脚手架选项、四个脚本、目录结构、模块解析与 HMR,让"项目能跑"不再是靠运气。
- 0218 分钟
模板与表单:指令、修饰符与 v-model 的完整用法
模板是 Vue 唯一的声明式入口。这一节把条件渲染、列表、class/style 绑定、事件修饰符与表单 v-model 讲成一张可查的表,并给出一套三层校验的表单做法。
- 0316 分钟
Vue 到底是什么:声明式渲染与响应式
从命令式 DOM 操作讲到声明式渲染,再拆开响应式的三件事:依赖收集、触发更新、调度。这一节建立整门课的心智模型。
- 0416 分钟
模板与组件:从能写到写对
模板语法只是入口,真正决定可维护性的是组件边界。这一节讲清插值、指令、修饰符、props/emit 与插槽的正确用法。
- 0516 分钟
组件边界:通信方式与状态该放在哪
组件拆分不是"越小越好",而是按职责与变更频率划边界。这一节给出七种通信方式的适用场景,以及状态放置的判断顺序。
- 0618 分钟
生命周期与调试:钩子该放在哪,问题该从哪查
生命周期的本质是"组件在某一刻能做什么"。这一节给出六个阶段的钩子对照、父子执行顺序与各自的使用边界,并把 Vue DevTools 的调试路径走一遍。
模块二 · 响应式与编译
0 / 2模块三 · 工程与体验
0 / 5- 0916 分钟
路由与状态:把页面与共享状态放对位置
路由解决"页面在哪",状态解决"数据归谁"。这一节讲清三种路由模式、守卫执行顺序、Pinia 的结构,以及什么时候不该用全局状态。
- 1019 分钟
请求层与四态:把 loading、错误与空数据做对
请求不是"调个接口赋值给 ref"。这一节讲清请求层的统一封装、四种页面状态的建模、竞态与取消、去重与缓存,并给出一个可复用的 useRequest。
- 1118 分钟
TypeScript 与 Vue:把组件契约写成类型
TS 在 Vue 里不是装饰,而是组件契约。这一节讲清 props/emits/model 的类型写法、模板 ref 与 provide 的类型、泛型组件,以及模板类型为什么会丢。
- 1218 分钟
动画与内置组件:Transition、Teleport、KeepAlive 与 Suspense
体验由过渡、层级与加载态共同决定。这一节讲清四个内置组件的适用边界、类名时序与常见陷阱,并给出对话框与列表动画的完整做法。
- 1319 分钟
SSR 与 Nuxt:首屏、水合,以及"该不该上"
SSR 不是性能银弹,它用服务端成本换首屏与 SEO。这一节讲清四种渲染模式的取舍、Nuxt 的数据约定、水合不一致的排查,以及什么时候不该上。