编译模板并重新设置其在渲染中的位置。
1 .模板2 .模板编译3 .渲染函数4.vnode5 .用户界面
1-3是模板编译3-5属于虚拟DOM
Vue.js提供了模板语法，使您可以在声明式中描述状态和DOM之间的绑定关系，并通过模板生成实际的DOM以显示在用户界面中。
基础是在线的，Vue.js将模板编译为虚拟DOM呈现函数。 当APP应用程序内部的状态发生变化时，Vue.js可以与响应系统配合使用，以智能地找到并重新渲染最少的组件，从而实现最小的DOM操作。
将模板编译为渲染函数要将模板编译为渲染函数，需要执行以下两个步骤：
1 .首先将模板解析为ast(abstractsyntaxtree，抽象语法树)。
2 .使用ast生成渲染函数。
由于静态节点不需要始终重新渲染，因此在生成AST后且在生成渲染函数之前，必须遍历AST一次以标记所有静态节点。 这样，当虚拟DOM随后更新节点时，如果节点上存在标志，则不会重新渲染。
因此，模板的编译大致分为三个阶段，抽象为三个模块分别实现具体功能。
1 .将模板解析为AST .
2 .遍历ast标记的静态节点。 ((优化程序) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) )。
3 .使用ast生成绘制函数。((代码生成器) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) )。
模板编译的整个过程
模板=输入="解析器=="优化程序=="代码生成器=输出="呈现函数
中间的三个部分称为模板编译。
解析器的内部分为过滤器解析器、文本解析器、HTML解析器。
最重要的是HTML解析器，它的作用是解析模板。 解析为HTML标记的开始位置、结束位置、文本或注释时，将调用解析器中的挂接函数，并通过参数传递相关信息。
每次调用挂接函数时，都会生成相应的AST节点，不同的节点类型会生成不同的AST。 和VNode一样，JS对象用于表示节点
优化程序遍历AST以检测并标记静态子树
标记AST上的静态字数后，无需在每次重新渲染时为这些静态节点创建新的虚拟节点，而是直接为克隆节点。 优化程序的作用是避免不必要的工作以提高性能。 因为静态节点除了初始渲染外不需要进行重新渲染操作。
代码生成器将AST转换为渲染函数的内容。 此内容称为“代码字符串”。
例如简单模板
p title='hello' @click='c'1/p//生成后的代码字符串为with(this ) return_c )、(attrs: ) title ) 3360 ) hellling
constcode=`with(this ) returnXXX ) (const hello=new function (code ) hello ) )绘制函数的作用是为了制作和产生vnode而使用很多函数
从模板到呈现函数的编译由三个部分组成。 首先将模板解析为AST，然后遍历AST标签的静态节点，最后使用AST生成代码字符串。 这三个部分对应于三个模块：解析器、优化程序和代码生成器。