摘要：具體可以查看抽象語(yǔ)法樹(shù)。而則是帶緩存的編譯器，同時(shí)以及函數(shù)會(huì)被轉(zhuǎn)換成對(duì)象。會(huì)用正則等方式解析模板中的指令等數(shù)據(jù)，形成語(yǔ)法樹(shù)。是將語(yǔ)法樹(shù)轉(zhuǎn)化成字符串的過(guò)程，得到結(jié)果是的字符串以及字符串。里面的節(jié)點(diǎn)與父節(jié)點(diǎn)的結(jié)構(gòu)類(lèi)似，層層往下形成一棵語(yǔ)法樹(shù)。

因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。

文章的原地址：https://github.com/answershuto/learnVue。

在學(xué)習(xí)過(guò)程中，為Vue加上了中文的注釋https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以對(duì)其他想學(xué)習(xí)Vue源碼的小伙伴有所幫助。

可能會(huì)有理解存在偏差的地方，歡迎提issue指出，共同學(xué)習(xí)，共同進(jìn)步。

首先看一下mount的代碼

/*把原本不帶編譯的$mount方法保存下來(lái)，在最后會(huì)調(diào)用。*/
const mount = Vue.prototype.$mount
/*掛載組件，帶模板編譯*/
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== "production" && warn(
      `Do not mount Vue to  or  - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  /*處理模板templete，編譯成render函數(shù)，render不存在的時(shí)候才會(huì)編譯template，否則優(yōu)先使用render*/
  if (!options.render) {
    let template = options.template
    /*template存在的時(shí)候取template，不存在的時(shí)候取el的outerHTML*/
    if (template) {
      /*當(dāng)template是字符串的時(shí)候*/
      if (typeof template === "string") {
        if (template.charAt(0) === "#") {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== "production" && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        /*當(dāng)template為DOM節(jié)點(diǎn)的時(shí)候*/
        template = template.innerHTML
      } else {
        /*報(bào)錯(cuò)*/
        if (process.env.NODE_ENV !== "production") {
          warn("invalid template option:" + template, this)
        }
        return this
      }
    } else if (el) {
      /*獲取element的outerHTML*/
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== "production" && config.performance && mark) {
        mark("compile")
      }

      /*將template編譯成render函數(shù)，這里會(huì)有render以及staticRenderFns兩個(gè)返回，這是vue的編譯時(shí)優(yōu)化，static靜態(tài)不需要在VNode更新時(shí)進(jìn)行patch，優(yōu)化性能*/
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== "production" && config.performance && mark) {
        mark("compile end")
        measure(`${this._name} compile`, "compile", "compile end")
      }
    }
  }
  /*Github:https://github.com/answershuto*/
  /*調(diào)用const mount = Vue.prototype.$mount保存下來(lái)的不帶編譯的mount*/
  return mount.call(this, el, hydrating)
}

通過(guò)mount代碼我們可以看到，在mount的過(guò)程中，如果render函數(shù)不存在（render函數(shù)存在會(huì)優(yōu)先使用render）會(huì)將template進(jìn)行compileToFunctions得到render以及staticRenderFns。譬如說(shuō)手寫(xiě)組件時(shí)加入了template的情況都會(huì)在運(yùn)行時(shí)進(jìn)行編譯。而render function在運(yùn)行后會(huì)返回VNode節(jié)點(diǎn)，供頁(yè)面的渲染以及在update的時(shí)候patch。接下來(lái)我們來(lái)看一下template是如何編譯的。

首先，template會(huì)被編譯成AST語(yǔ)法樹(shù)，那么AST是什么？

在計(jì)算機(jī)科學(xué)中，抽象語(yǔ)法樹(shù)（abstract syntax tree或者縮寫(xiě)為AST），或者語(yǔ)法樹(shù)（syntax tree），是源代碼的抽象語(yǔ)法結(jié)構(gòu)的樹(shù)狀表現(xiàn)形式，這里特指編程語(yǔ)言的源代碼。具體可以查看抽象語(yǔ)法樹(shù)。

AST會(huì)經(jīng)過(guò)generate得到render函數(shù)，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點(diǎn)，具體定義如下：

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component"s scope
  functionalContext: Component | void; // only for functional component root nodes
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  /*Github:https://github.com/answershuto*/
  
  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions
  ) {
    /*當(dāng)前節(jié)點(diǎn)的標(biāo)簽名*/
    this.tag = tag
    /*當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象，包含了具體的一些數(shù)據(jù)信息，是一個(gè)VNodeData類(lèi)型，可以參考VNodeData類(lèi)型中的數(shù)據(jù)信息*/
    this.data = data
    /*當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，是一個(gè)數(shù)組*/
    this.children = children
    /*當(dāng)前節(jié)點(diǎn)的文本*/
    this.text = text
    /*當(dāng)前虛擬節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)dom節(jié)點(diǎn)*/
    this.elm = elm
    /*當(dāng)前節(jié)點(diǎn)的名字空間*/
    this.ns = undefined
    /*編譯作用域*/
    this.context = context
    /*函數(shù)化組件作用域*/
    this.functionalContext = undefined
    /*節(jié)點(diǎn)的key屬性，被當(dāng)作節(jié)點(diǎn)的標(biāo)志，用以?xún)?yōu)化*/
    this.key = data && data.key
    /*組件的option選項(xiàng)*/
    this.componentOptions = componentOptions
    /*當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的組件的實(shí)例*/
    this.componentInstance = undefined
    /*當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)*/
    this.parent = undefined
    /*簡(jiǎn)而言之就是是否為原生HTML或只是普通文本，innerHTML的時(shí)候?yàn)閠rue，textContent的時(shí)候?yàn)閒alse*/
    this.raw = false
    /*靜態(tài)節(jié)點(diǎn)標(biāo)志*/
    this.isStatic = false
    /*是否作為跟節(jié)點(diǎn)插入*/
    this.isRootInsert = true
    /*是否為注釋節(jié)點(diǎn)*/
    this.isComment = false
    /*是否為克隆節(jié)點(diǎn)*/
    this.isCloned = false
    /*是否有v-once指令*/
    this.isOnce = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
}

關(guān)于VNode的一些細(xì)節(jié)，請(qǐng)參考VNode節(jié)點(diǎn)。

createCompiler用以創(chuàng)建編譯器，返回值是compile以及compileToFunctions。compile是一個(gè)編譯器，它會(huì)將傳入的template轉(zhuǎn)換成對(duì)應(yīng)的AST樹(shù)、render函數(shù)以及staticRenderFns函數(shù)。而compileToFunctions則是帶緩存的編譯器，同時(shí)staticRenderFns以及render函數(shù)會(huì)被轉(zhuǎn)換成Funtion對(duì)象。

因?yàn)椴煌脚_(tái)有一些不同的options，所以createCompiler會(huì)根據(jù)平臺(tái)區(qū)分傳入一個(gè)baseOptions，會(huì)與compile本身傳入的options合并得到最終的finalOptions。

首先還是貼一下compileToFunctions的代碼。

  /*帶緩存的編譯器，同時(shí)staticRenderFns以及render函數(shù)會(huì)被轉(zhuǎn)換成Funtion對(duì)象*/
  function compileToFunctions (
    template: string,
    options?: CompilerOptions,
    vm?: Component
  ): CompiledFunctionResult {
    options = options || {}

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production") {
      // detect possible CSP restriction
      try {
        new Function("return 1")
      } catch (e) {
        if (e.toString().match(/unsafe-eval|CSP/)) {
          warn(
            "It seems you are using the standalone build of Vue.js in an " +
            "environment with Content Security Policy that prohibits unsafe-eval. " +
            "The template compiler cannot work in this environment. Consider " +
            "relaxing the policy to allow unsafe-eval or pre-compiling your " +
            "templates into render functions."
          )
        }
      }
    }
    /*Github:https://github.com/answershuto*/
    // check cache
    /*有緩存的時(shí)候直接取出緩存中的結(jié)果即可*/
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (functionCompileCache[key]) {
      return functionCompileCache[key]
    }

    // compile
    /*編譯*/
    const compiled = compile(template, options)

    // check compilation errors/tips
    if (process.env.NODE_ENV !== "production") {
      if (compiled.errors && compiled.errors.length) {
        warn(
          `Error compiling template:

${template}

` +
          compiled.errors.map(e => `- ${e}`).join("
") + "
",
          vm
        )
      }
      if (compiled.tips && compiled.tips.length) {
        compiled.tips.forEach(msg => tip(msg, vm))
      }
    }

    // turn code into functions
    const res = {}
    const fnGenErrors = []
    /*將render轉(zhuǎn)換成Funtion對(duì)象*/
    res.render = makeFunction(compiled.render, fnGenErrors)
    /*將staticRenderFns全部轉(zhuǎn)化成Funtion對(duì)象 */
    const l = compiled.staticRenderFns.length
    res.staticRenderFns = new Array(l)
    for (let i = 0; i < l; i++) {
      res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors)
    }

    // check function generation errors.
    // this should only happen if there is a bug in the compiler itself.
    // mostly for codegen development use
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production") {
      if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
        warn(
          `Failed to generate render function:

` +
          fnGenErrors.map(({ err, code }) => `${err.toString()} in

${code}
`).join("
"),
          vm
        )
      }
    }

    /*存放在緩存中，以免每次都重新編譯*/
    return (functionCompileCache[key] = res) 
  }

我們可以發(fā)現(xiàn)，在閉包中，會(huì)有一個(gè)functionCompileCache對(duì)象作為緩存器。

  /*作為緩存，防止每次都重新編譯*/
  const functionCompileCache: {
    [key: string]: CompiledFunctionResult;
  } = Object.create(null)

在進(jìn)入compileToFunctions以后，會(huì)先檢查緩存中是否有已經(jīng)編譯好的結(jié)果，如果有結(jié)果則直接從緩存中讀取。這樣做防止每次同樣的模板都要進(jìn)行重復(fù)的編譯工作。

    // check cache
    /*有緩存的時(shí)候直接取出緩存中的結(jié)果即可*/
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (functionCompileCache[key]) {
      return functionCompileCache[key]
    }

在compileToFunctions的末尾會(huì)將編譯結(jié)果進(jìn)行緩存

  /*存放在緩存中，以免每次都重新編譯*/
  return (functionCompileCache[key] = res) 

  /*編譯，將模板template編譯成AST樹(shù)、render函數(shù)以及staticRenderFns函數(shù)*/
  function compile (
    template: string,
    options?: CompilerOptions
  ): CompiledResult {
    const finalOptions = Object.create(baseOptions)
    const errors = []
    const tips = []
    finalOptions.warn = (msg, tip) => {
      (tip ? tips : errors).push(msg)
    }

    /*做下面這些merge的目的因?yàn)椴煌脚_(tái)可以提供自己本身平臺(tái)的一個(gè)baseOptions，內(nèi)部封裝了平臺(tái)自己的實(shí)現(xiàn)，然后把共同的部分抽離開(kāi)來(lái)放在這層compiler中，所以在這里需要merge一下*/
    if (options) {
      // merge custom modules
      /*合并modules*/
      if (options.modules) {
        finalOptions.modules = (baseOptions.modules || []).concat(options.modules)
      }
      // merge custom directives
      if (options.directives) {
        /*合并directives*/
        finalOptions.directives = extend(
          Object.create(baseOptions.directives),
          options.directives
        )
      }
      // copy other options
      for (const key in options) {
        /*合并其余的options，modules與directives已經(jīng)在上面做了特殊處理了*/
        if (key !== "modules" && key !== "directives") {
          finalOptions[key] = options[key]
        }
      }
    }

    /*基礎(chǔ)模板編譯，得到編譯結(jié)果*/
    const compiled = baseCompile(template, finalOptions)
    if (process.env.NODE_ENV !== "production") {
      errors.push.apply(errors, detectErrors(compiled.ast))
    }
    compiled.errors = errors
    compiled.tips = tips
    return compiled
  }

compile主要做了兩件事，一件是合并option（前面說(shuō)的將平臺(tái)自有的option與傳入的option進(jìn)行合并），另一件是baseCompile，進(jìn)行模板template的編譯。

來(lái)看一下baseCompile

function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  /*parse解析得到ast樹(shù)*/
  const ast = parse(template.trim(), options)
  /*
    將AST樹(shù)進(jìn)行優(yōu)化
    優(yōu)化的目標(biāo)：生成模板AST樹(shù)，檢測(cè)不需要進(jìn)行DOM改變的靜態(tài)子樹(shù)。
    一旦檢測(cè)到這些靜態(tài)樹(shù)，我們就能做以下這些事情：
    1.把它們變成常數(shù)，這樣我們就再也不需要每次重新渲染時(shí)創(chuàng)建新的節(jié)點(diǎn)了。
    2.在patch的過(guò)程中直接跳過(guò)。
 */
  optimize(ast, options)
  /*根據(jù)ast樹(shù)生成所需的code（內(nèi)部包含render與staticRenderFns）*/
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
}

baseCompile首先會(huì)將模板template進(jìn)行parse得到一個(gè)AST語(yǔ)法樹(shù)，再通過(guò)optimize做一些優(yōu)化，最后通過(guò)generate得到render以及staticRenderFns。

parse的源碼可以參見(jiàn)https://github.com/answershuto/learnVue/blob/master/vue-src/compiler/parser/index.js#L53。

parse會(huì)用正則等方式解析template模板中的指令、class、style等數(shù)據(jù)，形成AST語(yǔ)法樹(shù)。

optimize的主要作用是標(biāo)記static靜態(tài)節(jié)點(diǎn)，這是Vue在編譯過(guò)程中的一處優(yōu)化，后面當(dāng)update更新界面時(shí)，會(huì)有一個(gè)patch的過(guò)程，diff算法會(huì)直接跳過(guò)靜態(tài)節(jié)點(diǎn)，從而減少了比較的過(guò)程，優(yōu)化了patch的性能。

generate是將AST語(yǔ)法樹(shù)轉(zhuǎn)化成render funtion字符串的過(guò)程，得到結(jié)果是render的字符串以及staticRenderFns字符串。

至此，我們的template模板已經(jīng)被轉(zhuǎn)化成了我們所需的AST語(yǔ)法樹(shù)、render function字符串以及staticRenderFns字符串。

來(lái)看一下這段代碼的編譯結(jié)果

    
{{text}}
    
hello world
    

        
{{item.name}}
        
{{item.value}}
        
{{index}}
        
---
    
    

        {{text}}
    
    

轉(zhuǎn)化后得到AST樹(shù)，如下圖：

我們可以看到最外層的div是這顆AST樹(shù)的根節(jié)點(diǎn)，節(jié)點(diǎn)上有許多數(shù)據(jù)代表這個(gè)節(jié)點(diǎn)的形態(tài)，比如static表示是否是靜態(tài)節(jié)點(diǎn)，staticClass表示靜態(tài)class屬性（非bind:class）。children代表該節(jié)點(diǎn)的子節(jié)點(diǎn)，可以看到children是一個(gè)長(zhǎng)度為4的數(shù)組，里面包含的是該節(jié)點(diǎn)下的四個(gè)div子節(jié)點(diǎn)。children里面的節(jié)點(diǎn)與父節(jié)點(diǎn)的結(jié)構(gòu)類(lèi)似，層層往下形成一棵AST語(yǔ)法樹(shù)。

再來(lái)看看由AST得到的render函數(shù)

with(this){
    return _c(  "div",
                {
                    /*static class*/
                    staticClass:"main",
                    /*bind class*/
                    class:bindClass
                },
                [
                    _c( "div", [_v(_s(text))]),
                    _c("div",[_v("hello world")]),
                    /*這是一個(gè)v-for循環(huán)*/
                    _l(
                        (arr),
                        function(item,index){
                            return _c(  "div",
                                        [_c("p",[_v(_s(item.name))]),
                                        _c("p",[_v(_s(item.value))]),
                                        _c("p",[_v(_s(index))]),
                                        _c("p",[_v("---")])]
                                    )
                        }
                    ),
                    /*這是v-if*/
                    (text)?_c("div",[_v(_s(text))]):_c("div",[_v("no text")])],
                    2
            )
}

看了render function字符串，發(fā)現(xiàn)有大量的_c，_v，_s，_q，這些函數(shù)究竟是什么？

帶著問(wèn)題，我們來(lái)看一下core/instance/render。

/*處理v-once的渲染函數(shù)*/
  Vue.prototype._o = markOnce
  /*將字符串轉(zhuǎn)化為數(shù)字，如果轉(zhuǎn)換失敗會(huì)返回原字符串*/
  Vue.prototype._n = toNumber
  /*將val轉(zhuǎn)化成字符串*/
  Vue.prototype._s = toString
  /*處理v-for列表渲染*/
  Vue.prototype._l = renderList
  /*處理slot的渲染*/
  Vue.prototype._t = renderSlot
  /*檢測(cè)兩個(gè)變量是否相等*/
  Vue.prototype._q = looseEqual
  /*檢測(cè)arr數(shù)組中是否包含與val變量相等的項(xiàng)*/
  Vue.prototype._i = looseIndexOf
  /*處理static樹(shù)的渲染*/
  Vue.prototype._m = renderStatic
  /*處理filters*/
  Vue.prototype._f = resolveFilter
  /*從config配置中檢查eventKeyCode是否存在*/
  Vue.prototype._k = checkKeyCodes
  /*合并v-bind指令到VNode中*/
  Vue.prototype._b = bindObjectProps
  /*創(chuàng)建一個(gè)文本節(jié)點(diǎn)*/
  Vue.prototype._v = createTextVNode
  /*創(chuàng)建一個(gè)空VNode節(jié)點(diǎn)*/
  Vue.prototype._e = createEmptyVNode
  /*處理ScopedSlots*/
  Vue.prototype._u = resolveScopedSlots

  /*創(chuàng)建VNode節(jié)點(diǎn)*/
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

通過(guò)這些函數(shù)，render函數(shù)最后會(huì)返回一個(gè)VNode節(jié)點(diǎn)，在_update的時(shí)候，經(jīng)過(guò)patch與之前的VNode節(jié)點(diǎn)進(jìn)行比較，得出差異后將這些差異渲染到真實(shí)的DOM上。

作者：染陌

Email：[email protected] or [email protected]

Github: https://github.com/answershuto

Blog：http://answershuto.github.io/

知乎主頁(yè)：https://www.zhihu.com/people/cao-yang-49/activities

知乎專(zhuān)欄：https://zhuanlan.zhihu.com/ranmo

掘金： https://juejin.im/user/58f87ae844d9040069ca7507

osChina：https://my.oschina.net/u/3161824/blog

轉(zhuǎn)載請(qǐng)注明出處，謝謝。

歡迎關(guān)注我的公眾號(hào)