如何阅读与实验这本书

如果这套文档想真正变成“一本好书”，它不能只告诉你结论，还要告诉你：

应该怎么读，怎么验证，怎么把抽象原理落到真实产物和源码上。

这一页就是为这个目的写的。

先说一个最重要的阅读原则

不要把这套文档当成“只靠通读就能掌握”的材料。

更好的方式是三线并行：

1. 看文档，建立解释框架
2. 看编译产物，验证框架是否成立
3. 看项目源码，理解这些结论如何落到工程上

只有这样，很多本来容易停留在口头描述的概念，才会真正稳定下来。

推荐的阅读姿势

第一遍：只建立地图

第一遍不要纠结细节，重点是回答：

• Vue 哪些能力属于编译期
• 哪些能力属于运行期
• 模板、SFC、JSX、h() 最后都汇聚到什么
• Vue 3 的响应式系统和渲染系统怎样协作

这时优先读：

1. Vue 编译器介绍
2. 编译时指令 vs 运行时指令
3. .vue 文件的本质
4. vite dev 和 build 下的 vue 产物

第二遍：围绕高频语法糖细读

第二遍开始把日常最常用的能力拆开看：

• script setup
• v-bind
• v-on
• v-model
• v-if
• v-for
• slot
• style scoped

这时建议边读边做最小实验。

第三遍：进入工程与源码

第三遍再进入：

• 运行时响应式原理
• 类型提取
• 编译时扩展
• 组件库构建与使用方式

这时你的目标已经不是“知道结论”，而是“知道为什么会这样，以及如果自己实现会在哪里下手”。

建议配套使用的实验工具

1. play.vuejs.org

最适合做“极小例子”的编译验证。

你应该用它做这些事：

• 看模板被编译成什么
• 看 script setup 被编译成什么
• 看 v-model、v-if、slot 等语法会不会留下运行时 helper

2. 浏览器 DevTools

最适合做“真实项目里的产物观察”。

重点看：

• Network 面板里 ?vue&type=... 这类模块
• Sources 面板里开发态的编译结果
• Elements 面板里 data-v-xxxx 这类样式隔离痕迹

3. 本仓库源码

最适合做“从概念走到工程”的验证。

尤其建议反复对照：

• apps/only-vue-runtime
• apps/fully-compiled
• packages/type-infer
• packages/compile-time-directive

建议你怎样做笔记

读这套文档时，不要只抄定义。
更推荐按下面这种方式做笔记：

1. 这项能力属于编译期、运行期，还是两者协作？
2. 它的最小示例是什么？
3. 它在产物里留下了哪些关键痕迹？
4. 它和相近能力的边界在哪里？

例如：

• v-if vs v-show
• 组件 v-model vs 原生元素 v-model
• slot vs v-slot
• 模板 vs JSX vs h()

这种“边界型笔记”比单纯抄 API 更有用。

一个很实用的阅读顺序模板

如果你以后还想不断补这套文档，或者让别人也能顺着读，下面这个顺序是比较稳的：

1. 先看导读页，知道自己为什么读这一章
2. 再看核心正文，抓一句话结论
3. 立刻做一个最小实验验证
4. 回来看“建议继续阅读”
5. 再进入下一篇

这样整套内容就会更像一本“带实验的技术书”，而不是零散文章合集。

一句话理解

阅读这套文档最有效的方法，不是只记结论，而是始终让“文档、编译产物、项目源码”三者互相印证。

建议继续阅读

1. 前言
2. 入门导读
3. 语法演示