$mount

首先看一下mount的代码

  1. /*把原本不带编译的$mount方法保存下来，在最后会调用。*/
  2. const mount = Vue.prototype.$mount
  3. /*挂载组件，带模板编译*/
  4. Vue.prototype.$mount = function (
  5.   el?: string | Element,
  6.   hydrating?: boolean
  7. ): Component {
  8.   el = el && query(el)
  10.   /* istanbul ignore if */
  11.   if (el === document.body || el === document.documentElement) {
  12.     process.env.NODE_ENV !== 'production' && warn(
  13.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  14.     )
  15.     return this
  16.   }
  18.   const options = this.$options
  19.   // resolve template/el and convert to render function
  20.   /*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
  21.   if (!options.render) {
  22.     let template = options.template
  23.     /*template存在的时候取template，不存在的时候取el的outerHTML*/
  24.     if (template) {
  25.       /*当template是字符串的时候*/
  26.       if (typeof template === 'string') {
  27.         if (template.charAt(0) === '#') {
  28.           template = idToTemplate(template)
  29.           /* istanbul ignore if */
  30.           if (process.env.NODE_ENV !== 'production' && !template) {
  31.             warn(
  32.               `Template element not found or is empty: ${options.template}`,
  33.               this
  34.             )
  35.           }
  36.         }
  37.       } else if (template.nodeType) {
  38.         /*当template为DOM节点的时候*/
  39.         template = template.innerHTML
  40.       } else {
  41.         /*报错*/
  42.         if (process.env.NODE_ENV !== 'production') {
  43.           warn('invalid template option:' + template, this)
  44.         }
  45.         return this
  46.       }
  47.     } else if (el) {
  48.       /*获取element的outerHTML*/
  49.       template = getOuterHTML(el)
  50.     }
  51.     if (template) {
  52.       /* istanbul ignore if */
  53.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  54.         mark('compile')
  55.       }
  57.       /*将template编译成render函数，这里会有render以及staticRenderFns两个返回，这是vue的编译时优化，static静态不需要在VNode更新时进行patch，优化性能*/
  58.       const { render, staticRenderFns } = compileToFunctions(template, {
  59.         shouldDecodeNewlines,
  60.         delimiters: options.delimiters
  61.       }, this)
  62.       options.render = render
  63.       options.staticRenderFns = staticRenderFns
  65.       /* istanbul ignore if */
  66.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  67.         mark('compile end')
  68.         measure(`${this._name} compile`, 'compile', 'compile end')
  69.       }
  70.     }
  71.   }
  72.   /*Github:https://github.com/answershuto*/
  73.   /*调用const mount = Vue.prototype.$mount保存下来的不带编译的mount*/
  74.   return mount.call(this, el, hydrating)
  75. }

通过mount代码我们可以看到，在mount的过程中，如果render函数不存在（render函数存在会优先使用render）会将template进行compileToFunctions得到render以及staticRenderFns。譬如说手写组件时加入了template的情况都会在运行时进行编译。而render function在运行后会返回VNode节点，供页面的渲染以及在update的时候patch。接下来我们来看一下template是如何编译的。

一些基础

首先，template会被编译成AST，那么AST是什么？

在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。具体可以查看抽象语法树。

AST会经过generate得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，具体定义如下：

  1. export default class VNode {
  2.   tag: string | void;
  3.   data: VNodeData | void;
  4.   children: ?Array<VNode>;
  5.   text: string | void;
  6.   elm: Node | void;
  7.   ns: string | void;
  8.   context: Component | void; // rendered in this component's scope
  9.   functionalContext: Component | void; // only for functional component root nodes
  10.   key: string | number | void;
  11.   componentOptions: VNodeComponentOptions | void;
  12.   componentInstance: Component | void; // component instance
  13.   parent: VNode | void; // component placeholder node
  14.   raw: boolean; // contains raw HTML? (server only)
  15.   isStatic: boolean; // hoisted static node
  16.   isRootInsert: boolean; // necessary for enter transition check
  17.   isComment: boolean; // empty comment placeholder?
  18.   isCloned: boolean; // is a cloned node?
  19.   isOnce: boolean; // is a v-once node?
  20.   /*Github:https://github.com/answershuto*/
  22.   constructor (
  23.     tag?: string,
  24.     data?: VNodeData,
  25.     children?: ?Array<VNode>,
  26.     text?: string,
  27.     elm?: Node,
  28.     context?: Component,
  29.     componentOptions?: VNodeComponentOptions
  30.   ) {
  31.     /*当前节点的标签名*/
  32.     this.tag = tag
  33.     /*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/
  34.     this.data = data
  35.     /*当前节点的子节点，是一个数组*/
  36.     this.children = children
  37.     /*当前节点的文本*/
  38.     this.text = text
  39.     /*当前虚拟节点对应的真实dom节点*/
  40.     this.elm = elm
  41.     /*当前节点的名字空间*/
  42.     this.ns = undefined
  43.     /*编译作用域*/
  44.     this.context = context
  45.     /*函数化组件作用域*/
  46.     this.functionalContext = undefined
  47.     /*节点的key属性，被当作节点的标志，用以优化*/
  48.     this.key = data && data.key
  49.     /*组件的option选项*/
  50.     this.componentOptions = componentOptions
  51.     /*当前节点对应的组件的实例*/
  52.     this.componentInstance = undefined
  53.     /*当前节点的父节点*/
  54.     this.parent = undefined
  55.     /*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/
  56.     this.raw = false
  57.     /*静态节点标志*/
  58.     this.isStatic = false
  59.     /*是否作为跟节点插入*/
  60.     this.isRootInsert = true
  61.     /*是否为注释节点*/
  62.     this.isComment = false
  63.     /*是否为克隆节点*/
  64.     this.isCloned = false
  65.     /*是否有v-once指令*/
  66.     this.isOnce = false
  67.   }
  69.   // DEPRECATED: alias for componentInstance for backwards compat.
  70.   /* istanbul ignore next */
  71.   get child (): Component | void {
  72.     return this.componentInstance
  73.   }
  74. }

关于VNode的一些细节，请参考VNode节点。

createCompiler

createCompiler用以创建编译器，返回值是compile以及compileToFunctions。compile是一个编译器，它会将传入的template转换成对应的AST、render函数以及staticRenderFns函数。而compileToFunctions则是带缓存的编译器，同时staticRenderFns以及render函数会被转换成Funtion对象。

因为不同平台有一些不同的options，所以createCompiler会根据平台区分传入一个baseOptions，会与compile本身传入的options合并得到最终的finalOptions。

compileToFunctions

首先还是贴一下compileToFunctions的代码。

  1.   /*带缓存的编译器，同时staticRenderFns以及render函数会被转换成Funtion对象*/
  2.   function compileToFunctions (
  3.     template: string,
  4.     options?: CompilerOptions,
  5.     vm?: Component
  6.   ): CompiledFunctionResult {
  7.     options = options || {}
  9.     /* istanbul ignore if */
  10.     if (process.env.NODE_ENV !== 'production') {
  11.       // detect possible CSP restriction
  12.       try {
  13.         new Function('return 1')
  14.       } catch (e) {
  15.         if (e.toString().match(/unsafe-eval|CSP/)) {
  16.           warn(
  17.             'It seems you are using the standalone build of Vue.js in an ' +
  18.             'environment with Content Security Policy that prohibits unsafe-eval. ' +
  19.             'The template compiler cannot work in this environment. Consider ' +
  20.             'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
  21.             'templates into render functions.'
  22.           )
  23.         }
  24.       }
  25.     }
  26.     /*Github:https://github.com/answershuto*/
  27.     // check cache
  28.     /*有缓存的时候直接取出缓存中的结果即可*/
  29.     const key = options.delimiters
  30.       ? String(options.delimiters) + template
  31.       : template
  32.     if (functionCompileCache[key]) {
  33.       return functionCompileCache[key]
  34.     }
  36.     // compile
  37.     /*编译*/
  38.     const compiled = compile(template, options)
  40.     // check compilation errors/tips
  41.     if (process.env.NODE_ENV !== 'production') {
  42.       if (compiled.errors && compiled.errors.length) {
  43.         warn(
  44.           `Error compiling template:\n\n${template}\n\n` +
  45.           compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
  46.           vm
  47.         )
  48.       }
  49.       if (compiled.tips && compiled.tips.length) {
  50.         compiled.tips.forEach(msg => tip(msg, vm))
  51.       }
  52.     }
  54.     // turn code into functions
  55.     const res = {}
  56.     const fnGenErrors = []
  57.     /*将render转换成Funtion对象*/
  58.     res.render = makeFunction(compiled.render, fnGenErrors)
  59.     /*将staticRenderFns全部转化成Funtion对象 */
  60.     const l = compiled.staticRenderFns.length
  61.     res.staticRenderFns = new Array(l)
  62.     for (let i = 0; i < l; i++) {
  63.       res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors)
  64.     }
  66.     // check function generation errors.
  67.     // this should only happen if there is a bug in the compiler itself.
  68.     // mostly for codegen development use
  69.     /* istanbul ignore if */
  70.     if (process.env.NODE_ENV !== 'production') {
  71.       if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
  72.         warn(
  73.           `Failed to generate render function:\n\n` +
  74.           fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
  75.           vm
  76.         )
  77.       }
  78.     }
  80.     /*存放在缓存中，以免每次都重新编译*/
  81.     return (functionCompileCache[key] = res) 
  82.   }

我们可以发现，在闭包中，会有一个functionCompileCache对象作为缓存器。

  1.   /*作为缓存，防止每次都重新编译*/
  2.   const functionCompileCache: {
  3.     [key: string]: CompiledFunctionResult;
  4.   } = Object.create(null)

在进入compileToFunctions以后，会先检查缓存中是否有已经编译好的结果，如果有结果则直接从缓存中读取。这样做防止每次同样的模板都要进行重复的编译工作。

  1.     // check cache
  2.     /*有缓存的时候直接取出缓存中的结果即可*/
  3.     const key = options.delimiters
  4.       ? String(options.delimiters) + template
  5.       : template
  6.     if (functionCompileCache[key]) {
  7.       return functionCompileCache[key]
  8.     }

在compileToFunctions的末尾会将编译结果进行缓存

  1.   /*存放在缓存中，以免每次都重新编译*/
  2.   return (functionCompileCache[key] = res)

compile

  1.   /*编译，将模板template编译成AST、render函数以及staticRenderFns函数*/
  2.   function compile (
  3.     template: string,
  4.     options?: CompilerOptions
  5.   ): CompiledResult {
  6.     const finalOptions = Object.create(baseOptions)
  7.     const errors = []
  8.     const tips = []
  9.     finalOptions.warn = (msg, tip) => {
  10.       (tip ? tips : errors).push(msg)
  11.     }
  13.     /*做下面这些merge的目的因为不同平台可以提供自己本身平台的一个baseOptions，内部封装了平台自己的实现，然后把共同的部分抽离开来放在这层compiler中，所以在这里需要merge一下*/
  14.     if (options) {
  15.       // merge custom modules
  16.       /*合并modules*/
  17.       if (options.modules) {
  18.         finalOptions.modules = (baseOptions.modules || []).concat(options.modules)
  19.       }
  20.       // merge custom directives
  21.       if (options.directives) {
  22.         /*合并directives*/
  23.         finalOptions.directives = extend(
  24.           Object.create(baseOptions.directives),
  25.           options.directives
  26.         )
  27.       }
  28.       // copy other options
  29.       for (const key in options) {
  30.         /*合并其余的options，modules与directives已经在上面做了特殊处理了*/
  31.         if (key !== 'modules' && key !== 'directives') {
  32.           finalOptions[key] = options[key]
  33.         }
  34.       }
  35.     }
  37.     /*基础模板编译，得到编译结果*/
  38.     const compiled = baseCompile(template, finalOptions)
  39.     if (process.env.NODE_ENV !== 'production') {
  40.       errors.push.apply(errors, detectErrors(compiled.ast))
  41.     }
  42.     compiled.errors = errors
  43.     compiled.tips = tips
  44.     return compiled
  45.   }

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

来看一下baseCompile

baseCompile

  1. function baseCompile (
  2.   template: string,
  3.   options: CompilerOptions
  4. ): CompiledResult {
  5.   /*parse解析得到AST*/
  6.   const ast = parse(template.trim(), options)
  7.   /*
  8.     将AST进行优化
  9.     优化的目标：生成模板AST，检测不需要进行DOM改变的静态子树。
  10.     一旦检测到这些静态树，我们就能做以下这些事情：
  11.     1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。
  12.     2.在patch的过程中直接跳过。
  13.  */
  14.   optimize(ast, options)
  15.   /*根据AST生成所需的code（内部包含render与staticRenderFns）*/
  16.   const code = generate(ast, options)
  17.   return {
  18.     ast,
  19.     render: code.render,
  20.     staticRenderFns: code.staticRenderFns
  21.   }
  22. }

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

parse

parse的源码可以参见https://github.com/answershuto/learnVue/blob/master/vue-src/compiler/parser/index.js#L53。

parse会用正则等方式解析template模板中的指令、class、style等数据，形成AST。

optimize

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

generate

generate是将AST转化成render funtion字符串的过程，得到结果是render的字符串以及staticRenderFns字符串。

至此，我们的template模板已经被转化成了我们所需的AST、render function字符串以及staticRenderFns字符串。

举个例子

来看一下这段代码的编译结果

  1. <div class="main" :class="bindClass">
  2.     <div>{{text}}</div>
  3.     <div>hello world</div>
  4.     <div v-for="(item, index) in arr">
  5.         <p>{{item.name}}</p>
  6.         <p>{{item.value}}</p>
  7.         <p>{{index}}</p>
  8.         <p>---</p>
  9.     </div>
  10.     <div v-if="text">
  11.         {{text}}
  12.     </div>
  13.     <div v-else></div>
  14. </div>

转化后得到AST，如下图：

聊聊Vue的template编译 - 图1

我们可以看到最外层的div是这颗AST的根节点，节点上有许多数据代表这个节点的形态，比如static表示是否是静态节点，staticClass表示静态class属性（非bind:class）。children代表该节点的子节点，可以看到children是一个长度为4的数组，里面包含的是该节点下的四个div子节点。children里面的节点与父节点的结构类似，层层往下形成一棵AST。

再来看看由AST得到的render函数

  1. with(this){
  2.     return _c(  'div',
  3.                 {
  4.                     /*static class*/
  5.                     staticClass:"main",
  6.                     /*bind class*/
  7.                     class:bindClass
  8.                 },
  9.                 [
  10.                     _c( 'div', [_v(_s(text))]),
  11.                     _c('div',[_v("hello world")]),
  12.                     /*这是一个v-for循环*/
  13.                     _l(
  14.                         (arr),
  15.                         function(item,index){
  16.                             return _c(  'div',
  17.                                         [_c('p',[_v(_s(item.name))]),
  18.                                         _c('p',[_v(_s(item.value))]),
  19.                                         _c('p',[_v(_s(index))]),
  20.                                         _c('p',[_v("---")])]
  21.                                     )
  22.                         }
  23.                     ),
  24.                     /*这是v-if*/
  25.                     (text)?_c('div',[_v(_s(text))]):_c('div',[_v("no text")])],
  26.                     2
  27.             )
  28. }

_c，_v，_s，_q

看了render function字符串，发现有大量的_c，_v，_s，_q，这些函数究竟是什么？

带着问题，我们来看一下core/instance/render。

  1. /*处理v-once的渲染函数*/
  2.   Vue.prototype._o = markOnce
  3.   /*将字符串转化为数字，如果转换失败会返回原字符串*/
  4.   Vue.prototype._n = toNumber
  5.   /*将val转化成字符串*/
  6.   Vue.prototype._s = toString
  7.   /*处理v-for列表渲染*/
  8.   Vue.prototype._l = renderList
  9.   /*处理slot的渲染*/
  10.   Vue.prototype._t = renderSlot
  11.   /*检测两个变量是否相等*/
  12.   Vue.prototype._q = looseEqual
  13.   /*检测arr数组中是否包含与val变量相等的项*/
  14.   Vue.prototype._i = looseIndexOf
  15.   /*处理static树的渲染*/
  16.   Vue.prototype._m = renderStatic
  17.   /*处理filters*/
  18.   Vue.prototype._f = resolveFilter
  19.   /*从config配置中检查eventKeyCode是否存在*/
  20.   Vue.prototype._k = checkKeyCodes
  21.   /*合并v-bind指令到VNode中*/
  22.   Vue.prototype._b = bindObjectProps
  23.   /*创建一个文本节点*/
  24.   Vue.prototype._v = createTextVNode
  25.   /*创建一个空VNode节点*/
  26.   Vue.prototype._e = createEmptyVNode
  27.   /*处理ScopedSlots*/
  28.   Vue.prototype._u = resolveScopedSlots
  30.   /*创建VNode节点*/
  31.   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

通过这些函数，render函数最后会返回一个VNode节点，在_update的时候，经过patch与之前的VNode节点进行比较，得出差异后将这些差异渲染到真实的DOM上。