[!info] related notes

• 所属总入口：Vue MOC
• 对象介绍：Vue 3
• 阶段地图：Vue 基础 MOC · Vue 响应式 MOC · Vue 组合式与组件 MOC · Vue 路由与状态 MOC · Vue 渲染与性能 MOC
• 对照：React 学习路线 · React vs Vue3 状态模型
• 面试桥接：Vue 高频面试

Vue 学习路线 MOC

这个概念为什么出现

顺序混乱时，Vue 学习会变成 API 清单：会写 ref 却不懂依赖收集，会用组件库却不会切通信方式，会调性能却不懂更新链路。本路线把「从零到可交付 Vue3 应用」拆成七个阶段。

[!abstract] 路线结论 先建立组件与模板心智，再深入响应式系统；随后用 Composition API 组织逻辑与组件通信，再进入路由/Pinia 工程层；渲染与性能建立在响应式与组件边界之上，工具链（Vite）贯穿但不替代框架主线。

整条路线围绕五个问题：

1. 模板与组件如何描述界面
2. 响应式为何能自动追踪依赖并触发更新
3. Composition API 如何组织与复用逻辑
4. props/emit、provide/inject、Pinia 如何分工
5. 渲染更新路径与性能优化边界在哪

如何使用这份路线

场景	做法
从零开始	按阶段顺序读；每篇先跑 SFC 最小示例
已有 React 经验	重点补响应式与模板编译心智，对照状态模型笔记
只抓主干	看文末 8 个主干主题
面试导向	主线后接 高频面试

难度标记

• L1 入门 · L2 基础 · L3 核心心智 · L4 工程/性能 · L5 实现进阶

依赖关系总图

flowchart TD
    S1["阶段一 组件心智"] --> S2["阶段二 响应式系统"]
    S2 --> S3["阶段三 Composition API"]
    S3 --> S4["阶段四 组件通信与设计"]
    S4 --> S5["阶段五 路由与状态"]
    S5 --> S6["阶段六 渲染与性能"]
    S5 --> S7["阶段七 工程交付"]
    S6 --> S7

阶段与子 MOC 对照

阶段	目标	主要子 MOC
一	SFC、生命周期、条件/列表、插槽	Vue 基础 MOC
二	ref/reactive/computed/watch 与依赖收集	Vue 响应式 MOC
三	Composition API、script setup、宏	组合式与组件 MOC
四	通信方式、v-model、组件设计	组合式与组件 MOC
五	Vue Router、Pinia、权限	路由与状态 MOC
六	渲染流程、VDOM、性能	渲染与性能 MOC
七	Vite、样式、工程实践	Vite 学习路线 · Vue MOC

---

阶段一：组件心智

目标：理解 Vue 如何用模板与组件描述界面。

完成标准：

• 能写基本 SFC 并理解 template/script/style
• 能使用条件渲染与列表渲染
• 理解插槽的组合意义

序号	笔记	核心问题	难度	源码
1.1	Vue 3	Vue3 定位与主线	L1	否
1.2	生命周期	钩子时机	L2	否
1.3	条件与列表渲染	v-if/v-show/v-for/key	L2	否
1.4	插槽	内容分发	L2	否
1.5	组件通信总览	通信方式地图	L2	否
1.6	Options API	选项式组织（历史/对照）	L2	否

---

阶段二：响应式系统

目标：建立依赖收集与触发更新的核心模型。

完成标准：

• 能解释 track/trigger 直觉模型
• 能在 ref 与 reactive 间正确选择
• 能区分 computed 与 watch

序号	笔记	核心问题	难度	源码
2.1	响应式系统	响应式全景	L3	建议
2.2	ref 与 reactive	两种容器	L2	否
2.3	计算属性	派生与缓存	L2	否
2.4	watch 与 watchEffect	侦听副作用	L3	否
2.5	nextTick	DOM 更新后时机	L2	否
2.6	Vue2 vs Vue3 响应式	演进	L3	建议
2.7	defineProperty 模型	Vue2 机制	L4	建议
2.8	Proxy 响应式	Vue3 机制	L4	建议
2.9	React vs Vue3	对照	L3	否
2.10	最小实现	手写模型	L4	需要

---

阶段三：Composition API

目标：用组合式逻辑组织复杂功能。

完成标准：

• 能用 script setup 写组件
• 理解 defineProps/defineEmits/defineModel 边界
• 能抽取 composable

序号	笔记	核心问题	难度	源码
3.1	Composition API	组合式为何出现	L2	否
3.2	script setup	主流 SFC 写法	L2	否
3.3	script setup 宏	编译宏边界	L3	否
3.4	高级宏	expose/slots 等	L3	否
3.5	Composables 模式	逻辑复用	L3	否
3.6	VueUse	生态 composables	L2	否

---

阶段四：组件通信与设计

目标：在正确边界选择通信方式。

序号	笔记	核心问题	难度	源码
4.1	组件设计原则	职责切分	L3	否
4.2	props 与 emit	父子通信	L2	否
4.3	定义写法速查	声明细节	L2	否
4.4	provide/inject	跨层分发	L2	否
4.5	v-model	双向绑定本质	L2	否
4.6	defineModel	宏与 v-model 关系	L3	否
4.7	defineModel 选型	何时显式通信	L3	否
4.8	通信选型	综合选择	L3	否
4.9	通信对比	方式对照	L2	否
4.10	自定义指令	DOM 级复用	L3	否

---

阶段五：路由与状态

目标：支撑中大型应用导航与共享状态。

序号	笔记	核心问题	难度	源码
5.1	路由基础	浏览器路由原理	L2	否
5.2	Vue Router	路由系统	L2	否
5.3	守卫与权限	导航控制	L3	否
5.4	路由模块设计	拆分与 meta	L3	否
5.5	Pinia	集中状态	L2	否
5.6	Store 设计模式	store 边界	L3	否

---

阶段六：渲染与性能

目标：理解更新路径并做有依据的优化。

序号	笔记	核心问题	难度	源码
6.1	渲染与更新流程	从状态到 DOM	L3	建议
6.2	虚拟 DOM	协调层	L3	建议
6.3	性能优化	工程习惯	L3	否
6.4	scoped CSS 原理	样式隔离	L3	否
6.5	依赖收集对比	与 React 对照	L4	否
6.6	更新触发对比	更新模型对照	L4	否
6.7	状态模型核心差异	总差异	L3	否

---

阶段七：工程交付

序号	笔记	核心问题	难度	源码
7.1	Vite 学习路线	官方推荐工具链	L2	否
7.2	UI 交互总览	状态事件通信综合	L2	否
7.3	[[vue2-vs-vue3|Vue2 vs Vue3]]	迁移与差异	L2	否

---

如果只抓主干，优先这 8 个主题

1. Vue 3
2. 响应式系统
3. ref/reactive
4. computed · watch
5. Composition API · script setup
6. props/emit · v-model
7. Vue Router · Pinia
8. 渲染更新流程

一条实用学习原则

不要一开始就追组件库和面经。先把组件、响应式和状态流转讲清楚，再学路由、状态管理和性能。

0 到 1 的完成标准

• 能解释 ref 变更如何触发视图更新
• 能用 composable 抽出可复用逻辑
• 能在 props/emit、provide/inject、Pinia 间做选型
• 能配置基础路由守卫
• 能说明 computed 缓存与 watch 的边界

认知跳跃提醒

1. 未懂响应式就背 API → 先阶段二
2. 未懂通信边界就全局 Pinia → 先 4.8 / 5.5
3. 未懂更新流就谈性能 → 先 6.1 / 6.2

相关入口

• 总地图：Vue MOC
• 对象定位：Vue 3
• 对照：React 学习路线
• 面试：高频面试

自测题

1. 为什么响应式要先于 Composition API 深讲？
2. defineModel 是否让 props/emit 过时？

答案

1. Composition API 是组织方式；响应式是状态为何能驱动更新的机制。
2. 否；它是双向绑定场景的语法收敛，复杂通信仍需显式 props/emit 等。