Vue：模板编译 与 Virtual DOM

（一）Vue模板编译

在Vue中我们有三种方式来创建HTML

• 模板
• 手动写渲染函数
• JSX

渲染函数是最原始的方法，而模板最终会通过编译转换陈渲染函数。渲染函数执行后，会得到一份vnode用来渲染真实DOM。所以，模板编译其实是配合虚拟DOM进行渲染。

1. 什么是模板编译？

所谓模板编译就是把模板编译成vnode的渲染函数。

2. 模板编译过程：

模板编译可以分为三个阶段：

• 将模板解析为AST（抽象语法树）—— 解析器

• 遍历AST，对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化 —— 优化器

• 使用AST生成render函数代码字符串—— 代码生成器

关于模板编译的源码可以在vue-template-compiler包中查看。

（二）Vue虚拟DOM

1. Virtu