【vue3源码轻松学系列二】解析器

Vue3 解析器工作原理

Vue3 解析器是一个强大的工具，它可以将模板转换为高效的渲染函数。

Vue3 解析器的工作原理可以分为以下三个阶段：

1. 词法分析

在这个阶段，解析器会将模板字符串转换为一个由令牌组成的序列。每个令牌代表模板中的一个语法元素，例如标签、属性、文本等。

2. 语法分析

在这个阶段，解析器会将令牌序列转换为一个抽象语法树 (AST)。AST 代表了模板的结构和语义。

3. 代码生成

在这个阶段，解析器会根据 AST 生成渲染函数的代码。渲染函数是用来将模板转换为虚拟 DOM 的函数。

以下是 Vue3 解析器工作原理的详细说明：

1. 词法分析

Vue3 解析器使用 acorn: github.com/acornjs/aco… 库进行词法分析。acorn 库会将模板字符串转换为一个由令牌组成的序列。每个令牌代表模板中的一个语法元素，例如标签、属性、文本等。

例如，以下模板：

<div id="app">
  <h1>{{ count }}</h1>
</div>

会被解析为以下令牌序列：

[
  { type: "StartTag", start: 0, end: 4, value: "div" },
  { type: "Attribute", start: 5, end: 11, value: "id", quote: """ },
  { type: "AttributeValue", start: 12, end: 17, value: "app" },
  { type: "EndTag", start: 18, end: 22, value: "div" },
  { type: "StartTag", start: 23, end: 27, value: "h1" },
  { type: "MustacheTag", start: 28, end: 35, value: "count" },
  { type: "EndTag", start: 36, end: 40, value: "h1" },
  { type: "EndTag", start: 41, end: 45, value: "div" }
]

2. 语法分析

Vue3 解析器使用 estree: github.com/estree/estr… 库进行语法分析。estree 库会将令牌序列转换为一个抽象语法树 (AST)。AST 代表了模板的结构和语义。

例如，上述令牌序列会被解析为以下 AST：

{
  "type": "Program",
  "body": [
    {
      "type": "Element",
      "name": "div",
      "attributes": [
        {
          "type": "Attribute",
          "name": "id",
          "value": "app"
        }
      ],
      "children": [
        {
          "type": "Element",
          "name": "h1",
          "children": [
            {
              "type": "MustacheExpression",
              "expression": {
                "type": "Identifier",
                "name": "count"
              }
            }
          ]
        }
      ]
    }
  ]
}

3. 代码生成

Vue3 解析器会根据 AST 生成渲染函数的代码。渲染函数是用来将模板转换为虚拟 DOM 的函数。

例如，上述 AST 会被生成以下渲染函数代码：

JavaScript

function render(context) {
  var _c = context._c;
  return _c("div", { attrs: { id: "app" } }, [
    _c("h1", {}, [_c("span", {}, [context.count])])
  ]);
}

解析器模式

模式	适用范围	特性	语法	注意事项	应用场景
RCDATA 模式	HTML 和 XHTML 文档	- 将所有文本节点都视为纯文本，但不包括 < 和 > 字符。- 会解析实体引用。		- 不能包含 < 和 > 字符。	- 在 HTML 文档中包含 JavaScript 代码或 CSS 代码。
RAWTEXT 模式	HTML 文档	- 将所有文本节点都视为纯文本，包括 < 和 > 字符。- 不解析实体引用。	元素的内容	- 可能会导致 HTML 代码被解析执行。	- 在 HTML 文档中包含需要原样显示的文本，例如代码块或预格式化文本。
CDATA 模式	XML 文档	- 将所有文本节点都视为纯文本，包括 < 和 > 字符。- 不解析实体引用。		- 不能包含 ]]> 字符。	- 在 XML 文档中包含 XML 代码或特殊字符。
DATA 模式	XML 文档	- 将所有文本节点都视为纯文本，但不包括空格字符。- 不解析实体引用。	<![DATA[ ... ]]>	- 不能包含空格字符。- 不能包含 CDATA 标记。- 不能包含注释。	- 在 XML 文档中包含需要原样显示的文本，例如代码块或预格式化文本。

总结:

• RCDATA 模式和 CDATA 模式类似，但它们之间也有一些区别。RCDATA 模式用于 HTML 文档，而 CDATA 模式用于 XML 文档。RCDATA 模式会解析实体引用，而 CDATA 模式不会解析实体引用。
• RAWTEXT 模式和 DATA 模式类似，但它们之间也有一些区别。RAWTEXT 模式用于 HTML 文档，而 DATA 模式用于 XML 文档。RAWTEXT 模式可以包含空格字符，而 DATA 模式不能包含空格字符。

选择模式:

在选择使用哪种模式时，请考虑以下因素：

• 文档类型：是 HTML 文档还是 XML 文档？
• 文本内容：是否包含需要原样显示的特殊字符？
• 安全性：是否需要防止代码被执行？

参考资料

• acorn 文档: github.com/acornjs/aco…
• estree 文档: github.com/estree/estr…