第 3 章 模板编译：从字符串到渲染函数

第 3 章 · 模板编译：从字符串到渲染函数

章节摘要：渲染管线的第二站。你写在 template 里的 HTML 风格字符串并不能被浏览器执行，Vue 要先把它解析成抽象语法树，标记静态节点，再生成一个真正会跑的渲染函数。理解这一站，模板语法的所有限制、静态提升与编译优化才有解释框架。

学习目标

阅读完本章，你应当能够：

1. 说出模板编译三阶段——解析、优化、生成——各自的输入输出；
2. 解释为什么模板里只能写表达式不能写语句、为什么只能有一个根元素（Vue 2）；
3. 对比 v-if 与 v-show 在编译产物与运行成本上的差异；
4. 描述静态根节点的标记如何让 patch 阶段整树跳过比对。

核心概念速览

模板是给人读的界面描述，渲染函数是给机器执行的界面描述，编译器是两者之间的翻译官。

子章节导航

3.1 模板语法与编译过程

插值、缩写、修饰符这些表层语法，以及它们在 AST 与渲染函数层面的真实形态。

3.2 指令系统全景

条件渲染、列表渲染、双向绑定三大类指令的编译差异与运行成本，包含 v-if 与 v-show 的量化对比。

子章节之间的逻辑关系

3.1 讲翻译流水线本身，3.2 把常用指令逐个放进流水线里看产物。顺序不能倒——先懂流程，再看单个指令在流程里被翻译成了什么。

模板字符串
   │ 解析
AST 抽象语法树
   │ 优化：标记静态子树
渲染函数
   │ 3.2 的每个指令都在这一步显形
虚拟节点树 → 进入第 4 章
​

前置知识与后续延伸

• 前置：第 2 章的渲染 Watcher 概念（渲染函数就是它每次执行的代码）；
• 为后续铺路：本章产出的虚拟节点树正是第 4 章 diff 的输入；第 10 章 Vue 3 的静态提升、补丁标志等编译优化，全部建立在本章的三阶段模型上。

给读者一个判断进度的自测题：看完本章后，你应该能不查资料回答——为什么修改一个纯静态文案也要等编译，而 CDN 引入的项目改模板立即生效但线上更慢；为什么同一个项目里 v-if 写在 template 标签上合法、写在组件标签上却常出问题。答得上来，说明编译这站你已经通关；答不上来，回看 3.1 的三阶段图再读一遍相应小节，比硬往下走效率高。