Vue2-模板编译

发表于 2022-03-29 更新于 2022-07-13 分类于 Vue 阅读次数：阅读次数：

本文字数： 819 阅读时长 ≈ 1 分钟

把用户在模板中写的类似于原生html的内容进行编译。把原生html和非原生html找出，经过一系列处理成render函数的过程称为模板编译过程。

最终目的就是：把用户所写的模板转化成供Vue实例在挂载时可调用的render函数。或者你可以这样简单的理解为：模板编译就是一台机器，给它输入模板字符串，它就输出对应的render函数。

其中有三个阶段：
1.代码解析阶段：将一堆模板字符串用正则的方式解析成抽象语法树（AST）；
2.代码优化阶段：遍历AST进行静态节点的标记；
3.代码生成阶段：将AST转换成render函数；

HTML解析器是主线，先用HTML解析器进行解析整个模板，在解析过程中如果碰到文本内容，那就调用文本解析器来解析文本，如果碰到文本中包含过滤器那就调用过滤器解析器来解析。

HTML解析器：一边解析不同的内容一边调用对应的钩子函数生成对应的AST节点，最终完成将整个模板字符串转化成AST；
文本解析器：作用就是将HTML解析器解析得到的文本内容进行二次解析，解析文本内容中是否包含变量，如果包含变量，则将变量提取出来进行加工，为后续生产render函数做准备；

在解析过程中会给标签标记上type类型，便于后面的优化阶段；
type=1: 元素节点
type=2: 包含变量的节点
type=3: 纯文本节点

打静态标记的目的是为后面虚拟dom做diff算法也就是patch时，跳过静态节点，提高性能；

优化阶段干了两件事：
1.在AST中找出所有静态节点并打上标记；
2.在AST中找出所有静态根节点并打上标记；

打标记会根据type类型进行处理；若type=3, 一定是静态节点；若type=2,一定是非静态；若type=3，再继续深层遍历；

所谓代码生成其实就是根据模板对应的抽象语法树AST生成一个函数，通过调用这个函数就可以得到模板对应的虚拟DOM。

-------------本文结束&感谢您的阅读-------------