入门

这一章的目标不是覆盖所有 API，而是先帮你建立一个最重要的认知框架：

Vue 代码的运行结果，必须同时从“编译阶段”和“运行阶段”两条线去理解。

很多困惑都来自把两者混在一起了。比如：

• 为什么 script setup 看起来不像标准 JavaScript 却能运行？
• 为什么 v-if、v-for、v-model 看上去像模板语法，最后却变成了渲染函数调用？
• 为什么有些能力能靠插件在构建时实现，而有些必须留到运行时？

这一章会先把这些边界划清楚。

建议先掌握的三个概念

1. Vue 不是只有运行时

你写的 .vue、模板、宏、指令，并不会原样进入浏览器。

它们会先经过编译器处理，再生成浏览器能够执行的 JavaScript 和 CSS。

2. 模板只是输入形式

模板写起来更直观，但真正执行时，Vue 运行时面对的是渲染函数、VNode、指令绑定和响应式依赖。

3. 编译阶段会提前做优化

很多性能优化并不是在浏览器运行时“临时想出来”的，而是在编译时就把结构分析好了，例如静态节点提升、Patch Flag 标记、Block Tree 等。

本章内容

• 如何阅读与实验这本书 先建立阅读方法、实验路径和源码对照方式，避免只记概念不做验证。
• 术语表 用于回查高频概念，避免在阅读过程中反复卡在术语层。
• Vue 编译器介绍 先理解 Vue 编译体系由哪些部分组成，以及 .vue 文件怎样被拆解、编译、合并。
• 编译时指令 vs 运行时指令 帮你建立最容易混淆的一条边界：哪些能力发生在构建期，哪些能力发生在浏览器里。
• render vs setup render 函数 理解“组件渲染逻辑”在不同 API 风格下的组织方式。

推荐阅读顺序

1. 先读 如何阅读与实验这本书，确定阅读和验证方式
2. 需要时随手查 术语表，减少术语理解阻力
3. 再读 Vue 编译器介绍，建立整体地图
4. 再读 编译时指令 vs 运行时指令，补边界感
5. 最后读 render vs setup render 函数，把认知连接到实际组件代码

按困惑切入

• 如果你最困惑的是“为什么 .vue 不是浏览器原生格式”，先读 Vue 编译器介绍
• 如果你最困惑的是“哪些语法属于编译期，哪些属于运行期”，先读 编译时指令 vs 运行时指令
• 如果你最困惑的是“render 和 Composition API 到底怎么接起来”，先读 render vs setup render 函数

读完这一章后，你应该能回答

• .vue 文件为什么不是浏览器原生格式
• 模板为什么能转成渲染函数
• 编译时能力和运行时能力各自负责什么
• 为什么 Vue 既是“模板框架”，也是“运行时框架”

如果这些问题已经基本打通，就可以进入 本质章节，开始拆解最常见的语法糖和文件形态。

如果你想先看真实产物而不是停留在概念层，也可以直接跳到 进阶章节。

本章小结

这一章的任务不是让你记住所有细节，而是先把最关键的地图建立起来：

• Vue 同时有编译期和运行期
• 模板不是最终执行形态
• 很多语法糖都要放回编译链里理解

只要这三点稳定下来，后面读任何单篇原理文都会轻松很多。

下一章建议

接下来最自然的下一步，是进入 本质章节，开始拆日常高频语法糖的底层形态。