入门
这里不覆盖所有 API，只先把一条线讲清楚：
Vue 代码的运行结果，必须同时从“编译阶段”和“运行阶段”两条线去理解。
很多困惑都来自把这两条线混在一起。比如：
- 为什么
script setup看起来不像标准 JavaScript 却能运行？ - 为什么
v-if、v-for、v-model看上去像模板语法，最后却变成了渲染函数调用？ - 为什么有些能力能靠插件在构建时实现，而有些必须留到运行时？
先把边界划清楚，后面读单篇原理文会轻松很多。
先看这条链路
先把 Vue 的执行过程压成一条链：
txt
SFC / template / JSX
-> 编译器转换
-> render 函数和 VNode 创建调用
-> 响应式系统触发更新
-> 运行时 patch 到真实 DOM这不是实现细节全集，但足够用来判断一个问题应该放在哪一层。
建议先掌握的三个概念
1. Vue 不是只有运行时
你写的 .vue、模板、宏、指令，并不会原样进入浏览器。
它们会先经过编译器处理，再生成浏览器能够执行的 JavaScript 和 CSS。
2. 模板只是输入形式
模板写起来更直观，但执行时，Vue 运行时面对的是渲染函数、VNode、指令绑定和响应式依赖。
3. 编译阶段会提前做优化
很多性能优化并不是在浏览器运行时“临时想出来”的，而是在编译时就把结构分析好了，例如静态节点提升、Patch Flag 标记、Block Tree 等。
本章内容
- 如何阅读与实验这本书 先建立阅读方法、实验路径和源码对照方式，避免只记概念不做验证。
- 术语表 用于回查高频概念，避免在阅读过程中反复卡在术语层。
- Vue 编译器介绍 先理解 Vue 编译体系由哪些部分组成，以及
.vue文件怎样被拆解、编译、合并。 - 编译时指令 vs 运行时指令 帮你建立最容易混淆的一条边界：哪些能力发生在构建期，哪些能力发生在浏览器里。
- render vs setup render 函数 理解“组件渲染逻辑”在不同 API 风格下的组织方式。
阅读顺序
- 先读 如何阅读与实验这本书，确定阅读和验证方式
- 需要时随手查 术语表，减少术语理解阻力
- 再读 Vue 编译器介绍，建立整体地图
- 再读 编译时指令 vs 运行时指令，补边界感
- 最后读 render vs setup render 函数，把认知连接到实际组件代码
按困惑切入
- 如果你最困惑的是“为什么
.vue不是浏览器能直接运行的格式”，先读 Vue 编译器介绍 - 如果你最困惑的是“哪些语法属于编译期，哪些属于运行期”，先读 编译时指令 vs 运行时指令
- 如果你最困惑的是“render 和 Composition API 到底怎么接起来”，先读 render vs setup render 函数
读完这一章后，你应该能回答
.vue文件为什么不是浏览器能直接运行的格式- 模板为什么能转成渲染函数
- 编译时能力和运行时能力各自负责什么
- 为什么 Vue 既是“模板框架”，也是“运行时框架”
如果这些问题已经基本打通，就可以进入 本质章节，开始拆解最常见的语法糖和文件形态。
如果你想先看真实产物而不是停留在概念层，也可以直接跳到 进阶章节。
下一步
这里先要求你先建立这张地图：
- Vue 同时有编译期和运行期
- 模板不是最后执行形态
- 很多语法糖都要放回编译链里理解
这三点稳定下来，后面很多“为什么能这样写”的问题都会有落点。
接着读
接下来进入 本质章节，拆日常高频语法糖的底层形态。