--- theme: orange --- # 前言 Vue.js 提供了 2 个版本，一个是 `Runtime + Compiler` 版本，一个是 `Runtime only` 版本。`Runtime + Compiler` 版本是包含编译代码的，可以把编译过程放在运行时做，`Runtime only` 版本不包含编译代码的，需要借助 webpack 的 vue-loader 事先把模板编译成 render 函数。如果你需要在客户端**编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器**，即完整版： ```js // 需要编译器 new Vue({ template: '

' }) // 不需要编译器 new Vue({ render (h) { return h('div', this.hi) } }) ``` 当使用 vue-loader 或 vueify 的时候，\*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。在 Vue 的整个编译过程中，会做三件事： - **解析模板** `parse` **，生成 AST** - **优化 AST** `optimize` - **生成代码** `generate` **对编译过程的了解会让我们对 Vue 的指令、内置组件等有更好的理解。不过由于编译的过程是一个相对复杂的过程，我们只要求理解整体的流程、输入和输出即可，对于细节我们不必抠太细。由于篇幅较长，这里会用三篇文章来讲这三件事。这是第一篇，** `模板解析，template -> AST` **。** > 注：全文源码来源，Vue（2.6.11），Runtime + Compiler 的 Vue.js # 编译准备这里先做一个准备工作，编译之前有一个嵌套的函数调用，**看似非常的复杂，但是却有玄机。有什么玄机？接着往下看。** ## 源码编译链式调用 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3db4086549a41fe96ebfed23d153f87~tplv-k3u1fbpfcp-zoom-1.image) ## compileToFunctions 在源码走了一遭，发现经过一系列的调用，最后 `createCompiler` 函数返回的 `compileToFunctions`函数对应的就是 `$mount` 函数调用的 `compileToFunctions` 方法，它是调用 `createCompileToFunctionFn` 方法的返回值。 ```js // 伪代码 function createCompilerCreator (baseCompile) { return function createCompiler (baseOptions) { function compile ( template, options ) { ... return compiled } return { compile: compile, compileToFunctions: createCompileToFunctionFn(compile) } } } function createCompileToFunctionFn (compile) { var cache = Object.create(null); return function compileToFunctions ( template, options, vm ) { ... } } ``` 方法接受三个参数。 - 编译模板 template - 编译配置 options - Vue 的实例 **这个方法编译的核心代码就一行。** ``` // compile var compiled = compile(template, options); ``` **而 compile 方法的核心代码也就一行。** ``` const compiled = baseCompile(template, finalOptions) ``` 并且 `baseCompile`方法是在执行 `createCompilerCreator` 方法执行的时候传入的。 ``` var createCompiler = createCompilerCreator(function baseCompile ( template, options ) { var ast = parse(template.trim(), options); if (options.optimize !== false) { optimize(ast, options); } var code = generate(ast, options); return { ast: ast, render: code.render, staticRenderFns: code.staticRenderFns } }); ``` `baseCompile`会做三件事情。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6de0320e80ca48bf8926c5df47670058~tplv-k3u1fbpfcp-zoom-1.image) **其实看到这里你就会发现，这编译的准备工作，做了很多函数的调用，但是兜兜转转之后，最后回头来还是调用了最开始**`createCompilerCreator`**传入的函数。** **我理解这样做的原因是 Vue 本身是支持多平台的编译，在不同平台下的编译会有所有不同，但是在同一平台编译是相同的，所以在使用**`createCompiler(baseOptions)`**时，baseOptions 会有所有不同。** **在 Vue 中利用**`函数柯里化`**的思想，将** `baseOptions` **的配置参数进行了保存。并且在调用链中，不断的进行函数调用并返回函数。** **这其实也是利用了**`函数柯里化`**的思想把很多基础的函数抽离出来，** **通过 createCompilerCreator(baseCompile) 的方式把真正编译的过程和其它逻辑如对编译配置处理、缓存处理等剥离开，这样的设计还是非常巧妙的。** 编译准备已经做完，我们接下来看看 Vue 是如何做 `parse` 的。 # parse `parse` 要做的事情就是对 template 做解析，生成 AST 抽象语法树。 > 抽象语法树（Abstract Syntax Tree，AST），或简称[语法树](https://baike.baidu.com/item/%E8%AF%AD%E6%B3%95%E6%A0%91/7031301)（Syntax tree），是[源代码](https://baike.baidu.com/item/%E6%BA%90%E4%BB%A3%E7%A0%81)[语法](https://baike.baidu.com/item/%E8%AF%AD%E6%B3%95)结构的一种抽象表示。它以树状的形式表现[编程语言](https://baike.baidu.com/item/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80)的语法结构，树上的每个节点都表示源代码中的一种结构。例如现在有这样一段代码： ```HTML

``` 经过`parse`，就变成了一个嵌套的树状结构的对象。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d93e6c540f448f0ade8b8aff8525b07~tplv-k3u1fbpfcp-zoom-1.image) 在 AST 中，每一个树节点都是一个 element，并且维护了上下文关系（父子关系）。 ## 解析 template `parse`的过程核心就是 `parseHTML` 函数，这个函数的作用就是解析 template 模板。下面将解析过程中一些重要的点进行一个抽象解读。 ```js function parseHTML (html, options) { var stack = []; ... // 遍历模板字符串 while (html) { ... } // 清除所有剩余的标签 parseEndTag(); // 将 html 字符串的指针前移 function advance (n) { ... } // 解析开始标签 function parseStartTag () { ... } // 处理解析的开始标签的结果 function handleStartTag (match) { ... } // 解析结束标签 function parseEndTag (tagName, start, end) { ... } } ``` ### 标签匹配相关的正则下面也会讲到关于一些指令匹配相关的正则。其实这些正则大家在平时的项目中有涉及也可以用起来，毕竟这些正则是经过千万人测试的。 ```js // 识别合法的xml标签 var ncname = '[a-zA-Z_][\w\-\.]*'; // 复用拼接，这在我们项目中完成可以学起来 var qnameCapture = "((?:" + ncname + "\:)?" + ncname + ")"; // 匹配注释 var comment =/^