如何阅读与实验这本书

这套文档不适合只当文章合集读。它更像一份带实验的学习笔记：

每个结论都要尽量落到编译产物、源码或一个可运行例子上。

这里先讲阅读方法。

先定一个阅读原则

不要只靠通读。最好同时做三件事：

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. 语法演示