Vue模板编译

vue

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

模板编译

Vue.js中使用的是虚拟Dom，之所以使用Virtual Dom是因为在浏览器中使用Javascript操作文档DOM性能太差。

模板编译就是把template编译成抽象语法树（AST），AST会经过generate得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点。这样template最终被转换成了VNode数据对象，这也是实现数据双向绑定的基础。

具体过程

  • createCompiler：createCompiler用以创建编译器，返回值是compile以及compileToFunctions。compile是一个编译器，它会将传入的template转换成对应的AST树、render函数以及staticRenderFns函数

  • compileToFunctions：是带缓存的编译器，同时staticRenderFns以及render函数会被转换成Funtion对象

  • compile：主要做了两件事，一件是合并option（前面说的将平台自有的option与传入的option进行合并），另一件是baseCompile，进行模板template的编译

  • baseCompile：首先会将模板template进行parse得到一个AST语法树，再通过optimize做一些优化，最后通过generate得到render以及staticRenderFns

  • parse：用正则等方式解析template模板中的指令、class、style等数据，形成AST语法树

  • optimize：主要作用是标记static静态节点，这是Vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能

  • generate：将AST语法树转化成render funtion字符串的过程，得到结果是render的字符串以及staticRenderFns字符串