Vue模版编译原理解释

什么是模版编译

在日常开发中，我们把写在标签中的类似于原生HTML的内容称之为模板。因为我们在开发中，在标签中除了写一些原生HTML的标签，我们还会写一些变量插值，如，或者写一些Vue指令，如v-on、v-if等。而这些东西都是在原生HTML语法中不存在的。

Vue能将模版正确识别归功于vue的模版编译，Vue会把用户在标签中写的类似于原生HTML的内容进行编译，把原生HTML的内容找出来，再把非原生HTML找出来，经过一系列的逻辑处理生成渲染函数，也就是render函数，而render函数会将模板内容生成对应的VNode，而VNode再经过diff算法的patch过程从而得到将要渲染的视图中的VNode，最后根据VNode创建真实的DOM节点并插入到视图中， 最终完成视图的渲染更新。 

而把用户在标签中写的类似于原生HTML的内容进行编译，把原生HTML的内容找出来，再把非原生HTML找出来，经过一系列的逻辑处理生成渲染函数，也就是render函数的这一段过程称之为模板编译过程。

模版编译过程具体分为3个阶段：

1. 模板解析阶段：将一堆模板字符串用正则等方式解析成抽象语法树AST；
2. 优化阶段：遍历AST，找出其中的静态节点，并打上标记；
3. 代码生成阶段：将AST转换成渲染函数； 

模版解析阶段

整体流程：

在模板解析阶段主要做的工作是把用户在标签内写的模板使用正则等方式解析成抽象语法树。而这一阶段在源码中对应解析器（parser）模块。

解析器就是把用户所写的模板根据一定的解析规则解析出有效的信息，最后用这些信息形成AST。我们知道在模板内，除了有常规的HTML标签外，用户还会一些文本信息以及在文本信息中包含过滤器。而这些不同的内容在解析起来肯定需要不同的解析规则，所以解析器不可能只有一个，它应该除了有解析常规HTML的HTML解析器，还应该有解析文本的文本解析器以及解析文本中如果包含过滤器的过滤器解析器。

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

HTML解析器的工作流程，一句话概括就是：一边解析不同的内容一边调用对应的钩子函数生成对应的AST节点，最终完成将整个模板字符串转化成AST。

文本解析器的作用就是将HTML解析器解析得到的文本内容进行二次解析，解析文本内容中是否包含变量，如果包含变量，则将变量提取出来进行加工，为后续产生render函数做准备。

优化阶段

优化阶段，是为了提高虚拟DOM中patch过程的性能。在优化阶段将所有静态节点都打上标记，这样在patch过程中就可以跳过对比这些节点。

优化阶段主要干了两件事情，分别是从构建出的AST中找出并标记所有静态节点和所有静态根节点。

代码生成阶段

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