Vue模板编译原理

Vue中的模板编译是什么

刚接触Vue的同学可能会产生这样的疑问：为什么在“HTML”中可以通过{{ name }}、v-bind:value="value"等方式获取JavaScript中的变量？为什么单文件组件导出的只有JavaScript的代码，但是其它地方在使用该组件时却能渲染出组件的“HTML”样式？这其实都是Vue模板编译的功劳。

对于Vue来说，我们所认为的“HTML”其实都是字符串。Vue会根据其规定的模板语法规则，将其解析成AST语法树（其实就是用一个树状的大对象来描述我们所谓的“HTML”）；然后会对这个大对象进行一些初步处理，比如标记没有动态绑定值的节点；最后，会把这个大对象编译成render函数，并将它绑定在组件的实例上。这样，我们所认为的“HTML”就变成了JavaScript代码，可以基于JavaScript模块规则进行导入导出，在需要渲染组件的地方，就调用render函数，根据组件当前的状态生成虚拟dom，然后就可以根据这个虚拟dom去更新视图了。

Vue的模板编译就是将“HTML”模板编译成render函数的过程。这个过程大致可以分成三个阶段：

• 解析阶段：将“HTML”模板解析成AST语法树；
• 优化阶段：从AST语法树中找出静态子树并进行标记（被标记的静态子树在虚拟dom比对时会被忽略，从而提高虚拟dom比对的性能）；
• 代码生成阶段：通过AST生成代码字符串，并最终生成render函数。

下面我们来详细介绍这三个阶段。

解析阶段

解析阶段就是将模板字符串解析成AST语法树的过程，我们先来看一下经过这个过程转换的效果：

原始的模板字符串：

解析后得到的AST语法树：

接下来我们来看Vue是怎样将模板字符解析成AST语法树的，其核心代码如下：

// 通过一个栈来维护dom的层级
const stack = []
// 抽象语法树的根节点，在解析的过程中，会不断给它添加子孙节点
let root
// 当前解析内容的父节点，既当前解析出的内容都应该放在这个变量的children数组中；它是通过栈来维护的，在解析的过程中随着dom层级不断变化
let currentParent
 
// parseHTML是解析模板字符串的“主线程”，它的第一个参数是要解析的模板字符串，也就是单文件组件中最外层