vue.js模板编译原理

1.模板编译

模板编译的主要目标就是生成渲染函数。

渲染函数的作用是每次执行它，它就会使用当前最新的状态生成一份新的Vnode，然后使用这个vnode进行渲染。

2.将模板编译成渲染函数 

将模板编译成渲染函数可以分为两个步骤，先将模板解析成AST（抽象语法树）,然后再使用AST生成渲染函数。

• 模板编译分三部分内容：

1.将模板解析为AST

2.遍历AST标记静态节点

3.使用AST生成渲染函数

• 这三部分内容再模板编译中分别抽象出三个模块来实现各自的功能，分别是：

1.解析器

2.优化器

3.代码生成器

3.解析器 

解析器分为：

1.过滤器解析器

过滤器解析器是用来解析过滤器用的。

2.文本解析器

文本解析器是用来解析带变量的文本

3.HTML解析器

HTML解析器是解析模板的，每当解析到HTML标签的开始位置、结束位置、文本或者注释时，都会触发钩子函数，然后将相关信息通过参数传递出来。

4.优化器 

优化器的目标是遍历AST，检测出所有静态子树，并给其打标记。

5.代码生成器 

代码生成器是模板编译的最后一步，它的作用是将AST转化成渲染函数中的内容，这个内容可以称为：‘代码字符串’。