摘要：今年的月日，的版本正式發(fā)布了，其中核心代碼都進(jìn)行了重寫(xiě)，于是就專門花時(shí)間，對(duì)的源碼進(jìn)行了學(xué)習(xí)。本篇文章就是源碼學(xué)習(xí)的總結(jié)。實(shí)現(xiàn)了并且將靜態(tài)子樹(shù)進(jìn)行了提取，減少界面重繪時(shí)的對(duì)比。的最新源碼可以去獲得。

從去年9月份了解到Vue后，就被他簡(jiǎn)潔的API所吸引。1.0版本正式發(fā)布后，就在業(yè)務(wù)中開(kāi)始使用，將原先jQuery的功能逐步的進(jìn)行遷移。
今年的10月1日，Vue的2.0版本正式發(fā)布了，其中核心代碼都進(jìn)行了重寫(xiě)，于是就專門花時(shí)間，對(duì)Vue 2.0的源碼進(jìn)行了學(xué)習(xí)。本篇文章就是2.0源碼學(xué)習(xí)的總結(jié)。

先對(duì)Vue 2.0的新特性做一個(gè)簡(jiǎn)單的介紹：

大小 & 性能。Vue 2.0的線上包gzip后只有12Kb，而1.0需要22Kb，react需要44Kb。而且，Vue 2.0的性能在react等幾個(gè)框架中，性能是最快的。

VDOM。實(shí)現(xiàn)了Virtual DOM, 并且將靜態(tài)子樹(shù)進(jìn)行了提取，減少界面重繪時(shí)的對(duì)比。與1.0對(duì)比性能有明顯提升。

template & JSX。眾所周知，Vue 1.0使用的是template來(lái)實(shí)現(xiàn)模板，而React使用了JSX實(shí)現(xiàn)模板。關(guān)于template和JSX的爭(zhēng)論也很多，很多人不使用React就是因?yàn)闆](méi)有支持template寫(xiě)法。Vue 2.0對(duì)template和JSX寫(xiě)法都做了支持。使用時(shí)，可以根據(jù)具體業(yè)務(wù)細(xì)節(jié)進(jìn)行選擇，可以很好的發(fā)揮兩者的優(yōu)勢(shì)。就這一點(diǎn)，Vue已經(jīng)超過(guò)React了。

Server Render。2.0還對(duì)了Server Render做了支持。這一點(diǎn)并沒(méi)有在業(yè)務(wù)中使用，不做評(píng)價(jià)。

Vue的最新源碼可以去 https://github.com/vuejs/vue 獲得。本文講的是 2.0.3版本，2.0.3可以去 https://github.com/vuejs/vue/... 這里獲得。

下面開(kāi)始進(jìn)入正題。首先從生命周期開(kāi)始。

上圖就是官方給出的Vue 2.0的生命周期圖，其中包含了Vue對(duì)象生命周期過(guò)程中的幾個(gè)核心步驟。了解了這幾個(gè)過(guò)程，可以很好的幫助我們理解Vue的創(chuàng)建與銷毀過(guò)程。
從圖中我們可以看出，生命周期主要分為4個(gè)過(guò)程：

create。new Vue時(shí)，會(huì)先進(jìn)行create，創(chuàng)建出Vue對(duì)象。

mount。根據(jù)el, template, render方法等屬性，會(huì)生成DOM，并添加到對(duì)應(yīng)位置。

update。當(dāng)數(shù)據(jù)發(fā)生變化后，會(huì)重新渲染DOM，并進(jìn)行替換。

destory。銷毀時(shí)運(yùn)行。

那么這4個(gè)過(guò)程在源碼中是怎么實(shí)現(xiàn)的呢？我們從new Vue開(kāi)始。

為了更好的理解new的過(guò)程，我整理了一個(gè)序列圖：

new Vue的過(guò)程主要涉及到三個(gè)對(duì)象：vm、compiler、watcher。其中，vm表示Vue的具體對(duì)象；compiler負(fù)責(zé)將template解析為AST render方法；watcher用于觀察數(shù)據(jù)變化，以實(shí)現(xiàn)數(shù)據(jù)變化后進(jìn)行re-render。

下面來(lái)分析下具體的過(guò)程和代碼：
首先，運(yùn)行new Vue()的時(shí)候，會(huì)進(jìn)入代碼src/core/instance/index.js的Vue構(gòu)造方法中，并執(zhí)行this._init()方法。在_init中，會(huì)對(duì)各個(gè)功能進(jìn)行初始化，并執(zhí)行beforeCreate和created兩個(gè)生命周期方法。核心代碼如下:

initLifecycle(vm)
initEvents(vm)
callHook(vm, "beforeCreate")
initState(vm)
callHook(vm, "created")
initRender(vm)

這個(gè)過(guò)程有一點(diǎn)需要注意：   
beforeCreate和created之間只有initState，和官方給出的生命周期圖并不完全一樣。這里的initState是用于初始化data,props等的監(jiān)聽(tīng)的。

在_init的最后，會(huì)運(yùn)行initRender方法。在該方法中，會(huì)運(yùn)行vm.$mount方法，代碼如下：

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}

這里的vm.$mount可以在業(yè)務(wù)代碼中調(diào)用，這樣，new 過(guò)程和 mount過(guò)程就可以根據(jù)業(yè)務(wù)情況進(jìn)行分離。

這里的$mount在src/entries/web-runtime-with-compiler.js中，主要邏輯是根據(jù)el, template, render三個(gè)屬性來(lái)獲得AST render方法。代碼如下：

if (!options.render) {   // 如果有render方法，直接運(yùn)行mount
  let template = options.template
  if (template) {  // 如果有template， 獲取template參數(shù)對(duì)于的HTML作為模板
    if (typeof template === "string") {
      if (template.charAt(0) === "#") {
        template = idToTemplate(template)
      }
    } else if (template.nodeType) {
      template = template.innerHTML
    } else {
      if (process.env.NODE_ENV !== "production") {
        warn("invalid template option:" + template, this)
      }
      return this
    }
  } else if (el) {  // 如果沒(méi)有template, 且存在el，則獲取el的outerHTML作為模板
    template = getOuterHTML(el)
  }
  if (template) { // 如果獲取到了模板，則將模板轉(zhuǎn)化為render方法
    const { render, staticRenderFns } = compileToFunctions(template, {
      warn,
      shouldDecodeNewlines,
      delimiters: options.delimiters
    }, this)
    options.render = render
    options.staticRenderFns = staticRenderFns
  }
}
return mount.call(this, el, hydrating)

這個(gè)過(guò)程有三點(diǎn)需要注意：   
compile時(shí)，將最大靜態(tài)子樹(shù)提取出來(lái)作為多帶帶的AST渲染方法，以提升后面vNode對(duì)比時(shí)的性能。所以，當(dāng)存在多個(gè)連續(xù)的靜態(tài)標(biāo)簽時(shí)，可以在外邊添加一個(gè)靜態(tài)父節(jié)點(diǎn)，這樣，staticRenderFns數(shù)目可以減少，從而提升性能。   
Vue 2.0中的模板有三種引用寫(xiě)法：el, template, render(JSX)。其中的優(yōu)先級(jí)是render > template > el。   
el, template兩種寫(xiě)法，最后都會(huì)通過(guò)compiler轉(zhuǎn)化為render(JSX)來(lái)運(yùn)行，也就是說(shuō)，直接寫(xiě)成render(JSX)是性能最優(yōu)的。當(dāng)然，如果使用了構(gòu)建工具，最終生成的包就是使用的render(JSX)。這樣子，在源碼上就可以不用過(guò)多考慮這一塊的性能了，直接用可維護(hù)性最好的方式就行。

將模板轉(zhuǎn)化為render，用到了compileToFunctions方法，該方法最后會(huì)通過(guò)src/compiler/index.js文件中的compile方法，將模板轉(zhuǎn)化為AST語(yǔ)法結(jié)構(gòu)的render方法，并對(duì)靜態(tài)子樹(shù)進(jìn)行分離。

完成render方法的生成后，會(huì)進(jìn)入_mount（src/core/instance.lifecycle.js）中進(jìn)行DOM更新。該方法的核心邏輯如下：

vm._watcher = new Watcher(vm, () => {
  vm._update(vm._render(), hydrating)
}, noop)

首先會(huì)new一個(gè)watcher對(duì)象，在watcher對(duì)象創(chuàng)建后，會(huì)運(yùn)行傳入的方法vm._update(vm._render(), hydrating)（watcher的邏輯在下面的watcher小節(jié)中細(xì)講）。其中的vm._render()主要作用就是運(yùn)行前面compiler生成的render方法，并返回一個(gè)vNode對(duì)象。這里的vNode就是一個(gè)虛擬的DOM節(jié)點(diǎn)。

拿到vNode后，傳入vm._update()方法，進(jìn)行DOM更新。

上面已經(jīng)講完了new Vue過(guò)程中的主要步驟，其中涉及到template如何轉(zhuǎn)化為DOM的過(guò)程，這里多帶帶拿出來(lái)講下。先上序列圖：

從圖中可以看出，從template到DOM，有三個(gè)過(guò)程：

template -> AST render （compiler解析template）

AST render -> vNode (render方法運(yùn)行)

vNode -> DOM (vdom.patch)

首先是template在compiler中解析為AST render方法的過(guò)程。上一節(jié)中有說(shuō)到，initRender后，會(huì)調(diào)用到src/entries/web-runtime-with-compiler.js中的Vue.prototype.$mount方法。在$mount中，會(huì)獲取template，然后調(diào)用src/platforms/web/compiler/index.js的compileToFunctions方法。在該方法中，會(huì)運(yùn)行compile將template解析為多個(gè)render方法，也就是AST render。這里的compile在文件src/compiler/index.js中，代碼如下:

const ast = parse(template.trim(), options)   // 解析template為AST
optimize(ast, options)  // 提取static tree
const code = generate(ast, options)  // 生成render 方法
return {
  ast,
  render: code.render,
  staticRenderFns: code.staticRenderFns
}

可以看出，compile方法就是將template以AST的方式進(jìn)行解析，并轉(zhuǎn)化為render方法進(jìn)行返回。

再看第二個(gè)過(guò)程：AST render -> vNode。這個(gè)過(guò)程很簡(jiǎn)單，就是將AST render方法進(jìn)行運(yùn)行，獲得返回的vNode對(duì)象。

最后一步，vNode -> DOM。該過(guò)程中，存在vNode的對(duì)比以及DOM的添加修改操作。
在上一節(jié)中，有講到vm._update()方法中對(duì)DOM進(jìn)行更新。_update的主要代碼如下：

// src/core/instance/lifecycle.js
if (!prevVnode) {
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  vm.$el = vm.__patch__(vm.$el, vnode, hydrating)  // 首次添加
} else {
  vm.$el = vm.__patch__(prevVnode, vnode)  // 數(shù)據(jù)變化后觸發(fā)的DOM更新
}

可以看出，無(wú)論是首次添加還是后期的update，都是通過(guò)__patch__來(lái)更新的。這里的__patch__核心步驟是在src/core/vdom/patch.js中的patch方法進(jìn)行實(shí)現(xiàn)，源碼如下：

function patch (oldVnode, vnode, hydrating, removeOnly) {
    if (!oldVnode) {
      ...
    } else {
      ...
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)  // diff并更新DOM。
      } else {
        elm = oldVnode.elm
        parent = nodeOps.parentNode(elm)
        ...
        if (parent !== null) {
          nodeOps.insertBefore(parent, vnode.elm, nodeOps.nextSibling(elm))  // 添加element到DOM。
          removeVnodes(parent, [oldVnode], 0, 0)
        }
        ...
      }
    }
    ...
  }

首次添加很簡(jiǎn)單，就是通過(guò)insertBefore將轉(zhuǎn)化好的element添加到DOM中。如果是update，則會(huì)調(diào)動(dòng)patchVnode()。最后來(lái)看下patchVnode的代碼：

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  ...
  const elm = vnode.elm = oldVnode.elm
  const oldCh = oldVnode.children
  const ch = vnode.children
  ...
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {  // 當(dāng)都存在時(shí)，更新Children
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {  // 只存在新節(jié)點(diǎn)時(shí)，即添加節(jié)點(diǎn)
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, "")
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {  // 只存在老節(jié)點(diǎn)時(shí)，即刪除節(jié)點(diǎn)
      removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {  // 刪除了textContent
      nodeOps.setTextContent(elm, "")
    }
  } else if (oldVnode.text !== vnode.text) { // 修改了textContent
    nodeOps.setTextContent(elm, vnode.text)
  }
}

其中有調(diào)用了updateChildren來(lái)更新子節(jié)點(diǎn)，代碼如下：

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  ...
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      ...
    }
  }
  ...
}

可以看到updateChildren中，又通過(guò)patchVnode來(lái)更新當(dāng)前節(jié)點(diǎn)。梳理一下，patch通過(guò)patchVnode來(lái)更新根節(jié)點(diǎn)，然后通過(guò)updateChildren來(lái)更新子節(jié)點(diǎn)，具體子節(jié)點(diǎn)，又通過(guò)patchVnode來(lái)更新，通過(guò)一個(gè)類似于遞歸的方式逐個(gè)節(jié)點(diǎn)的完成對(duì)比和更新。

Vue 2.0中對(duì)如何去實(shí)現(xiàn)VDOM的思路是否清晰，通過(guò)4層結(jié)構(gòu)，很好的實(shí)現(xiàn)了可維護(hù)性，也為實(shí)現(xiàn)server render, weex等功能提供了可能。拿server render舉例，只需要將最后的vNode -> DOM 改成 vNode -> String 或者 vNode -> Stream， 就可以實(shí)現(xiàn)server render。剩下的compiler和Vue的核心邏輯都不需要改。

我們都知道MVVM框架的特征就是當(dāng)數(shù)據(jù)發(fā)生變化后，會(huì)自動(dòng)更新對(duì)應(yīng)的DOM節(jié)點(diǎn)。使用MVVM之后，業(yè)務(wù)代碼中就可以完全不寫(xiě)DOM操作代碼，不僅可以將業(yè)務(wù)代碼聚焦在業(yè)務(wù)邏輯上，還可以提高業(yè)務(wù)代碼的可維護(hù)性和可測(cè)試性。那么Vue 2.0中是怎么實(shí)現(xiàn)對(duì)數(shù)據(jù)變化的監(jiān)聽(tīng)的呢？照例，先看序列圖：

可以看出，整個(gè)Watcher的過(guò)程可以分為三個(gè)過(guò)程。

對(duì)state設(shè)置setter/getter

對(duì)vm設(shè)置好Watcher，添加好state 觸發(fā) setter時(shí)的執(zhí)行方法

state變化觸發(fā)執(zhí)行

前面有說(shuō)過(guò)，在生命周期函數(shù)beforeCreate和created直接，會(huì)運(yùn)行方法initState()。在initState中，會(huì)對(duì)Props, Data, Computed等屬性添加Setter/Getter。拿Data舉例，設(shè)置setter/getter的代碼如下：

function initData (vm: Component) {
  let data = vm.$options.data
  ...
  // proxy data on instance
  const keys = Object.keys(data)
  let i = keys.length
  while (i--) {
    ...
    proxy(vm, keys[i])   // 設(shè)置vm._data為代理
  }
  // observe data
  observe(data)
}

通過(guò)調(diào)用observe方法，會(huì)對(duì)data添加好觀察者，核心代碼為:

Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
    const value = getter ? getter.call(obj) : val
    if (Dep.target) {
      dep.depend()  // 處理好依賴watcher
      ...
    }
    return value
  },
  set: function reactiveSetter (newVal) {
    ...
    childOb = observe(newVal)  // 對(duì)新數(shù)據(jù)重新observe
    dep.notify()  // 通知到dep進(jìn)行數(shù)據(jù)更新
  }
})

這個(gè)時(shí)候，對(duì)data的監(jiān)聽(tīng)已經(jīng)完成?？梢钥吹剑?dāng)data發(fā)生變化的時(shí)候，會(huì)運(yùn)行dep.notify()。在notify方法中，會(huì)去運(yùn)行watcher的update方法，內(nèi)容如下:

update () {
  if (this.lazy) {
    this.dirty = true
  } else if (this.sync) {
    this.run()
  } else {
    queueWatcher(this)
  }
}
run () {
  if (this.active) {
    const value = this.get()
  }
  ...
}

update方法中，queueWatcher方法的目的是通過(guò)nextTicker來(lái)執(zhí)行run方法，屬于支線邏輯，就不分析了，這里直接看run的實(shí)現(xiàn)。run方法其實(shí)很簡(jiǎn)單，就是調(diào)用get方法，而get方法會(huì)通過(guò)執(zhí)行this.getter()來(lái)更新DOM。

那么this.getter是什么呢？本文最開(kāi)始分析new Vue過(guò)程時(shí)，有講到運(yùn)行_mount方法時(shí)，會(huì)運(yùn)行如下代碼:

vm._watcher = new Watcher(vm, () => {
  vm._update(vm._render(), hydrating)
}, noop)

那么this.getter就是這里Watcher方法的第二個(gè)參數(shù)。來(lái)看下new Watcher的代碼:

export default class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: Object = {}
  ) {
    ...
    if (typeof expOrFn === "function") {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
    }
    ...
    this.value = this.lazy
      ? undefined
      : this.get()
  }
}

可以看出，在new Vue過(guò)程中，Watcher會(huì)在構(gòu)造完成后主動(dòng)調(diào)用this.get()來(lái)觸發(fā)this.getter()方法的運(yùn)行，以達(dá)到更新DOM節(jié)點(diǎn)。

總結(jié)一下這個(gè)過(guò)程：首先_init時(shí)，會(huì)對(duì)Data設(shè)置好setter方法，setter方法中會(huì)調(diào)用dep.notify()，以便數(shù)據(jù)變化時(shí)通知DOM進(jìn)行更新。然后new Watcher時(shí)，會(huì)將更新DOM的方法進(jìn)行設(shè)置，也就是Watcher.getter方法。最后，當(dāng)Data發(fā)生變化的時(shí)候，dep.notify()運(yùn)行，運(yùn)行到watcher.getter()時(shí)，就會(huì)去運(yùn)行render和update邏輯，最終達(dá)到DOM更新的目的。

剛開(kāi)始覺(jué)得看源碼，是因?yàn)橄Ｍ芰私庀耉ue 2.0的實(shí)現(xiàn)，看看能不能得到一些從文檔中無(wú)法知道的細(xì)節(jié)，用于提升運(yùn)行效率。把主要流程理清楚后，的確了解到一些，這里做個(gè)整理：

el屬性傳入的如果不是element，最后會(huì)通過(guò)document.querySelector來(lái)獲取的，這個(gè)接口性能較差，所以，el傳入一個(gè)element性能會(huì)更好。

$mount方法中對(duì)html，body標(biāo)簽做了過(guò)濾，這兩個(gè)不能用來(lái)作為渲染的根節(jié)點(diǎn)。

每一個(gè)組件都會(huì)從_init開(kāi)始重新運(yùn)行，所以，當(dāng)存在一個(gè)長(zhǎng)列表時(shí)，將子節(jié)點(diǎn)作為一個(gè)組件，性能會(huì)較差。

*.vue文件會(huì)在構(gòu)建時(shí)轉(zhuǎn)化為render方法，而render方法的性能比指定template更好。所以，源碼使用*.vue的方式，性能更好。

如果需要自定義delimiters，每一個(gè)組件都需要多帶帶指定。

如果是*.vue文件，指定delimiters是失效的，因?yàn)?b>vue-loader對(duì)*.vue文件進(jìn)行解析時(shí)，并沒(méi)有將delimiters傳遞到compiler.compile()中。（這一點(diǎn)不確定是bug還是故意這樣設(shè)計(jì)的）。