Vue模板编译原理

简单说，Vue的编译过程就是将template转换成render函数的过程。

1. 首先会解析模板，生成抽象语法树（一种用JavaScript对象的形式来描述整个模板）。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候会调用对应的钩子函数进行相关处理。
2. Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再发生变化，对应的DOM也不会变化。那么优化过程就是深度遍历抽象语法树，按照相关条件对树节点进行标记。这些被标记的节点（静态节点），我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
3. 编译的最后一步是将优化后的抽象语法树转换成可执行的代码。