Vue2.x 源码学习：揭秘 AST 语法树构建过程

## 前言

在上一篇文章中，我们学习了 compileToFunction 函数，了解了如何将模板编译成渲染函数。在本篇文章中，我们将继续深入探究 Vue2.x 的编译过程，重点关注如何将模板编译成 AST（抽象语法树）语法树。AST 语法树是 Vue2.x 编译过程中的一个重要中间产物，它将模板中的元素和指令解析成一个结构化的树形数据结构，为后续的代码生成和渲染奠定了基础。

## AST 语法树概述

AST（抽象语法树）语法树是一种树形数据结构，它可以用来表示代码的结构。在 Vue2.x 中，AST 语法树用于表示模板中的元素和指令。AST 语法树的节点可以分为两种类型：

* 元素节点：表示模板中的元素，例如 `<div>`、`<p>` 等。
* 指令节点：表示模板中的指令，例如 `v-model`、`v-for` 等。

AST 语法树的结构如下图所示：

AST 语法树结构图

根节点
元素节点
子元素节点
子指令节点
指令节点
参数
修饰符

## parserHTM 函数

在 Vue2.x 中，将模板编译成 AST 语法树的任务由 parserHTM 函数负责。parserHTM 函数是一个递归函数，它会逐个解析模板中的元素和指令，并将其转换为 AST 语法树的节点。

parserHTM 函数的实现位于 src/compiler/parser/html-parser.js 文件中。函数的签名如下：

function parserHTM(template, options) {
// ...
}

参数 template 是要解析的模板字符串，参数 options 是一个包含各种配置选项的对象。

parserHTM 函数的内部实现非常复杂，涉及到大量的正则表达式和递归调用。为了便于理解，我们将把它分解成几个步骤来讲解：

### 1. 初始化

在第一步中，parserHTM 函数会进行一些初始化工作，包括：

* 创建一个新的 AST 语法树根节点。
* 创建一个当前元素节点的栈。
* 创建一个当前指令节点的栈。

### 2. 逐个解析模板中的字符

在第二步中，parserHTM 函数会逐个解析模板中的字符。对于每个字符，它都会执行以下操作：

* 如果当前字符是 `<`，则说明遇到了一个标签的开始。parserHTM 函数会调用 parseStartTag 函数来解析标签的开始。
* 如果当前字符是 `>`，则说明遇到了一个标签的结束。parserHTM 函数会调用 parseEndTag 函数来解析标签的结束。
* 如果当前字符不是 `<` 或 `>`，则说明遇到了一个文本节点。parserHTM 函数会调用 parseText 函数来解析文本节点。

### 3. 解析标签的开始

在 parseStartTag 函数中，parserHTM 函数会执行以下操作：

* 如果标签的名称是 `template`，则说明遇到了一个模板标签。parserHTM 函数会跳过这个标签，因为模板标签不会被编译成 AST 语法树。
* 如果标签的名称不是 `template`，则说明遇到了一个普通的标签。parserHTM 函数会创建一个新的元素节点，并将它添加到当前元素节点的栈中。
* 如果标签中包含属性，则 parserHTM 函数会解析这些属性，并将它们添加到元素节点的属性列表中。
* 如果标签中包含指令，则 parserHTM 函数会解析这些指令，并将它们添加到当前指令节点的栈中。

### 4. 解析标签的结束

在 parseEndTag 函数中，parserHTM 函数会执行以下操作：

* 如果标签的名称是 `template`，则说明遇到了一个模板标签的结束。parserHTM 函数会跳过这个标签，因为模板标签不会被编译成 AST 语法树。
* 如果标签的名称不是 `template`，则说明遇到了一个普通的标签的结束。parserHTM 函数会将当前元素节点从栈中弹出，并将它添加到父元素节点的子节点列表中。

### 5. 解析文本节点

在 parseText 函数中，parserHTM 函数会执行以下操作：

* 如果文本节点包含插值表达式，则 parserHTM 函数会将插值表达式解析成一个指令节点，并将它添加到当前指令节点的栈中。
* 如果文本节点不包含插值表达式，则 parserHTM 函数会将文本节点解析成一个文本节点，并将它添加到当前元素节点的子节点列表中。

### 6. 构建 AST 语法树

在解析完整个模板之后，parserHTM 函数会将当前元素节点从栈中弹出，并将它作为 AST 语法树的根节点返回。

## 结语

通过本文的学习，我们对 Vue2.x 的编译过程有了更深入的了解，尤其是对 AST 语法树的构建过程有了详细的认识。掌握了这些知识，我们就可以更好地理解 Vue2.x 的底层原理，并为后续的学习和开发打下坚实的基础。