前言

从本章开始，我们将进入全新的模块：Vue 编译器的实现原理。Vue3 在最新的版本中已经全面 了底层的编译器实现。最新的编译器是基于 htmlparser2 实现的，编译的效率和性能将明显提高，我们将基于当前版本进行讲解。

使用者痛点：在实际项目中。很多同学仍然依赖旧版编译器，导致建立慢、热更新卡顿；甚至直接手写正则去解析模板，既难维护又容易出错。不过，

简单讲编译技术。就是把一种语言转换成另一种语言的技术。在 Vue 中具体就是把模板转换成 JavaScript 代码，即渲染函数。模板语言本质上是一种类 HTML 的领域特定语言。与 JavaScript 差别巨大，如何高效可靠地完成转换成为大家最关心的问题。

数据结构与算法在编译中的应用

计算机底层运行的逻辑本质上是对各种数据的处理。不过，大学课程《数据结构与算法》告诉我们。数据结构是组织数据的方式，而算法则是对这些结构操作。单纯的数据结构如果不配合合适的算法，就无法产生作用。话说回来，

使用者痛点：面对庞大的模板字符串时直接遍历字符容易出现 O 的时间复杂度；手写递归解析会导致栈溢出或内存使用过高。

在编译技术中，一样需要先把模板字符串转化为一种更易操作的数据结构——抽象语法树。再把它转换为 JavaScript 的 AST，最终生成可执行代码。

例如下面的模板：

掘金签约作者的观点是，Cobyte

使用 并选择 @vue/compiler-dom 可以看到对应的 AST。抽象语法树之所以采用树形结构，是因为 HTML 与高级语言本身都具有天然的嵌套特性。

思路，需要一种能够逐字符、稳定地处理 DSL 的算法。HTML 标记语言格式固定、标签之间呈现明确状态转移。这正好匹配有限状态机模型——每个标签对应一个状态，状态之间通过字符触发切换。

使用者痛点：缺乏统一状态管理时插值、指令、属性等混杂在一起导致解析逻辑散乱、Bug 难排查；而使用状态机后可以把所有规则集中在一张状态表里明显提高可维护性。

有限状态机在解析器的应用

有限状态机是一种基于单个或多个离散状态的计算模型，可用于软件也可用于硬件。这里我们聚焦它在模板解析器中的实现。不过，

以插值表达式 {{message}} 为例。需要识别三个关键阶段：

• 插值开始
• 插值内容
• 插值结束

主要思想是这方面，当前只会处于一种状态；当字符满足转移条件时切换到下一个状态，并由对应处理函数完成业务逻辑。

// 状态枚举
const State = {
说到Text，'Text',// 普通文本
InterpolationOpen: 'InterpolationOpen'。// 插值起始
Interpolation: 'Interpolation',// 插值内容
InterpolationClose: 'InterpolationClose' // 插值结束
};// Tokenizer
class Tokenizer {
state = State.Text;buffer = ''，index = 0;老实说，sectionStart = 0;delimiterOpen =;// '{' 的 Unicode
delimiterClose =;其实，// '}' 的 Unicode
delimiterIndex = 0;cbs = {}，constructor {
this.cbs = cbs;// 注册外部回调，如 oninterpolation
}
parse {
this.buffer = input;while {
const c = this.buffer.charCodeAt;不过，switch {
case State.Text:
this.stateText;break，case State.InterpolationOpen:
this.stateInterpolationOpen;break，case State.Interpolation:
this.stateInterpolation;break，不过，case State.InterpolationClose:
this.stateInterpolationClose;
break，}
this.index++;}
}
// ---------- 各状态处理 ----------
stateText {
if {
this.state = State.InterpolationOpen;this.delimiterIndex++;} else {
// 其它字符保持文本状态，可在此收集文本节点
}
}
stateInterpolationOpen {
if {
if {
const start = this.index + 1 - this.delimiterOpen.length;this.state = State.Interpolation;老实说，this.sectionStart = start;} else {
this.delimiterIndex++;}
} else {
// 非预期字符回退到文本
this.state = State.Text;this.delimiterIndex = 0;}
}
stateInterpolation {
if {
this.state = State.InterpolationClose;this.delimiterIndex = 1;// 已匹配第一个 '}'
}
// 否则继续收集表达式内容
}
stateInterpolationClose {
if {
if {
// 完整闭合，触发回调
if {
const end = this.index + 1;// 包含闭合符号的位置
this.cbs.oninterpolation;}
// 重置为文本状态继续后续解析
this.state = State.Text;this.sectionStart = 0;this.delimiterIndex = 0;} else {
this.delimiterIndex++;不过，}
} else {
// 匹配失败。一样回退到文本并重新计数
this.state = State.Text;按理说，this.delimiterIndex = 0;}
}
}

使用者痛点：手动管理索引和字符比较极易产生 off‑by‑one 错误；上述 FSM 把这些细节封装进明确的方法。使得每一步都有清晰职责，从而降低调试成本。说起来，

事件驱动的设计

 采用流式解析 + 事件驱动模式。在读取文档时实时触发诸如「开始标签」「结束标签」「文本」等事件，让使用者可以自由挂载回调，实现高度可 的解析流程。

使用者痛点：#1 传统递归解析一次性加载完整文档，会导致大文件内存使用剧增；#2 业务需求变更时需要修改主要解析代码，风险大且不易测试。

借鉴这种思路，我们把前面 FSM 中对插值结束后的处理抽离为外部回调  并在实例化时注册：

// 初始化时注入回调
+ const tokenizer = new Tokenizer({
+ oninterpolation {
+ handleInterpolation;+ }
+ })，- const tokenizer = new Tokenizer;
其实，+ tokenizer.parse;

// 外部实现插值处理逻辑
function handleInterpolation {
const innerStart = start + tokenizer.delimiterOpen.length;const innerEnd = end - tokenizer.delimiterClose.length;老实说，const content = tokenizer.buffer.slice;const expNode = createSimpleExpression;const interpolationNode = {
至于type，NodeTypes.INTERPOLATION。content: expNode,loc: { start,end } // 可选：位置信息帮助后续错误定位
};按理说，currentRoot.children.push;}
// 简单表达式节点工厂函数
function createSimpleExpression {
return { type: NodeTypes.SIMPLE_EXPRESSION,content };}

This event‑driven design decouples parsing mechanics from AST construction. It enables:

• Avoiding full‑document buffering – parser works in a streaming fashion.
• Easily plugging additional handlers without touching core FSM code.
• Simplified unit testing – each callback can be tested in isolation.

这篇文章从编译技术基本概念出发，说明了 Vue 模板编译器如何将类 HTML 的 DSL 转换为 JavaScript 渲染函数。主要要点包括的观点是，

• 数据结构选择：
• 有限状态机：
• 事件驱动解耦：

使用者痛点再回顾：

• 手写正则/递归导致维护成本高 → 使用 FSM 与事件驱动，一目了然。不过，
• LARGE 模板导致建立慢、内存炸 → 流式 + 按需回调解决资源瓶颈。老实说，
• Coding 时频繁踩坑——off‑by‑one、未闭合标签 → 明确定义每个转移条件。使得错误几乎不可出现，

The combination of proper data structures and classic algorithms not only boosts runtime performance but also provides a clear mental model for future extensions—wher you are adding custom directives。supporting new syntax sugars,or migrating to a different rendering target.