高级 30 分钟概要
AI 生成的附录
本附录由 GPT-5.5 根据 chibivue 原书内容起草。请将这条路线视为学习指南；原始章节与实现代码仍是权威依据。
这是一幅高度压缩的全书地图，适合希望在阅读源码前快速通览全书的读者。每个检查点大约用一分钟。内容已经很清楚时就继续前进；感觉模糊时则打开链接所指的章节。
30 个检查点
- 全书从一行渲染代码开始：重点不是完美复刻 Vue，而是亲手重建其中的思路。
- Vue 的核心组成部分：运行时、渲染器、响应式系统、编译器和 SFC 工具分别关注不同的问题。
- 项目设置：包的边界让学习路径清晰可见。
- createApp：应用 API 封装了挂载过程，为用户提供统一入口。
- 包架构：runtime-core 保持平台无关，runtime-dom 负责浏览器操作。
- h 与 VNode：渲染结果是数据结构，而不是 DOM。
- 事件与属性：DOM patch 需要针对平台处理 props。
- 最小响应式系统：Proxy 读取意味着 track，Proxy 写入意味着 trigger。
- 最小虚拟 DOM：patch 比较新旧 VNode 并更新 DOM。
- 最小组件：挂载组件 VNode 时会创建实例并执行渲染函数。
- Props：父组件的数据通过规范化的输入传入子组件。
- Emits：子组件事件本质上是按约定命名的父组件处理器。
- 模板编译器概览：模板会变成渲染函数。
- 编译器实现：解析、转换和代码生成构成编译器的核心流水线。
- 模板绑定：编译器输出必须从渲染上下文读取值。
- 解析 SFC：
.vue文件会拆分为 script、template 和 style 块。 - SFC template/script/style：Vite 插件将 SFC 转换接入开发流程。
- 带 key 的 patch：稳定的 key 让渲染器能够移动和复用子节点。
- Shape Flags：位标志降低了重复类型检查的成本。
- 调度器：响应式变化将任务加入队列，从而批量处理重复更新。
- ref、computed 与 watch：响应式能力从对象扩展到值容器和面向用户的 effect。
- 响应式 Proxy 处理器：集合、ref、只读值与 shallow 值需要更细致的处理器逻辑。
- Effect 清理与作用域：effect 不仅需要重新运行，也需要生命周期管理。
- 组件生命周期：组件实例为运行时调用用户钩子提供了时机。
- Provide/Inject 与 setup context：组件树需要结构化的依赖与上下文传递通道。
- 插槽：子节点可以作为延迟执行的渲染函数传递。
- 模板转换：指令是将语法转换为 VNode 数据的编译器插件。
- 结构指令：
v-if、v-for、Fragment、注释和插槽共同决定生成树的形状。 - SFC 编译器宏：
script setup、defineProps、defineEmits、scoped CSS 和基于类型的宏都是编译期便利功能。 - 应用开发基础与优化：路由、Store、SSR、内置组件、静态提升、Patch Flags、树扁平化和 Vapor Mode 展示了同一组核心思路如何扩展。
完成概要之后
不中断地阅读一条源码路径：
txt
packages/reactivity -> packages/runtime-core -> packages/runtime-dom -> packages/compiler-core -> packages/compiler-sfc然后阅读调试原始 Vue.js 源码，将 chibivue 的简化选择与 vuejs/core 进行比较。\n