Vue 2.0源碼分析-update

Vue 的 _update 是實例的一個私有方法，它被調用的時機有 2 個，一個是首次渲染，一個是數據更新的時候；由于我們這一章節只分析首次渲染部分，數據更新部分會在之后分析響應式原理的時候涉及。_update 方法的作用是把 VNode 渲染成真實的 DOM，它的定義在 src/core/instance/lifecycle.js 中：

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {const vm: Component = thisconst prevEl = vm.$elconst prevVnode = vm._vnodeconst prevActiveInstance = activeInstanceactiveInstance = vmvm._vnode = vnode// Vue.prototype.__patch__ is injected in entry points// based on the rendering backend used.if (!prevVnode) {// initial rendervm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)} else {// updatesvm.$el = vm.__patch__(prevVnode, vnode)}activeInstance = prevActiveInstance// update __vue__ referenceif (prevEl) {prevEl.__vue__ = null}if (vm.$el) {vm.$el.__vue__ = vm}// if parent is an HOC, update its $el as wellif (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {vm.$parent.$el = vm.$el}// updated hook is called by the scheduler to ensure that children are// updated in a parent's updated hook.
}

_update 的核心就是調用 vm.__patch__ 方法，這個方法實際上在不同的平臺，比如 web 和 weex 上的定義是不一樣的，因此在 web 平臺中它的定義在 src/platforms/web/runtime/index.js 中：

Vue.prototype.__patch__ = inBrowser ? patch : noop

可以看到，甚至在 web 平臺上，是否是服務端渲染也會對這個方法產生影響。因為在服務端渲染中，沒有真實的瀏覽器 DOM 環境，所以不需要把 VNode 最終轉換成 DOM，因此是一個空函數，而在瀏覽器端渲染中，它指向了 patch 方法，它的定義在 src/platforms/web/runtime/patch.js中：

import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'// the directive module should be applied last, after all
// built-in modules have been applied.
const modules = platformModules.concat(baseModules)export const patch: Function = createPatchFunction({ nodeOps, modules })

該方法的定義是調用 createPatchFunction 方法的返回值，這里傳入了一個對象，包含 nodeOps 參數和 modules 參數。其中，nodeOps 封裝了一系列 DOM 操作的方法，modules 定義了一些模塊的鉤子函數的實現，我們這里先不詳細介紹，來看一下 createPatchFunction 的實現，它定義在 src/core/vdom/patch.js 中：

const hooks = ['create', 'activate', 'update', 'remove', 'destroy']export function createPatchFunction(backend) {let i, jconst cbs = {}const { modules, nodeOps } = backendfor (i = 0; i < hooks.length; ++i) {cbs[hooks[i]] = []for (j = 0; j < modules.length; ++j) {if (isDef(modules[j][hooks[i]])) {cbs[hooks[i]].push(modules[j][hooks[i]])}}}return function patch(oldVnode, vnode, hydrating, removeOnly) {if (isUndef(vnode)) {if (isDef(oldVnode)) invokeDestroyHook(oldVnode)return}let isInitialPatch = falseconst insertedVnodeQueue = []if (isUndef(oldVnode)) {// empty mount (likely as component), create new root elementisInitialPatch = truecreateElm(vnode, insertedVnodeQueue)} else {const isRealElement = isDef(oldVnode.nodeType)if (!isRealElement && sameVnode(oldVnode, vnode)) {// patch existing root nodepatchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)} else {if (isRealElement) {// mounting to a real element// check if this is server-rendered content and if we can perform// a successful hydration.if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {oldVnode.removeAttribute(SSR_ATTR)hydrating = true}if (isTrue(hydrating)) {if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {invokeInsertHook(vnode, insertedVnodeQueue, true)return oldVnode} else if (process.env.NODE_ENV !== 'production') {warn('The client-side rendered virtual DOM tree is not matching ' +'server-rendered content. This is likely caused by incorrect ' +'HTML markup, for example nesting block-level elements inside ' +'<p>, or missing <tbody>. Bailing hydration and performing ' +'full client-side render.')}}// either not server-rendered, or hydration failed.// create an empty node and replace itoldVnode = emptyNodeAt(oldVnode)}// replacing existing elementconst oldElm = oldVnode.elmconst parentElm = nodeOps.parentNode(oldElm)// create new nodecreateElm(vnode,insertedVnodeQueue,// extremely rare edge case: do not insert if old element is in a// leaving transition. Only happens when combining transition +// keep-alive + HOCs. (#4590)oldElm._leaveCb ? null : parentElm,nodeOps.nextSibling(oldElm))// update parent placeholder node element, recursivelyif (isDef(vnode.parent)) {let ancestor = vnode.parentconst patchable = isPatchable(vnode)while (ancestor) {for (let i = 0; i < cbs.destroy.length; ++i) {cbs.destroy[i](ancestor)}ancestor.elm = vnode.elmif (patchable) {for (let i = 0; i < cbs.create.length; ++i) {cbs.create[i](emptyNode, ancestor)}// #6513// invoke insert hooks that may have been merged by create hooks.// e.g. for directives that uses the "inserted" hook.const insert = ancestor.data.hook.insertif (insert.merged) {// start at index 1 to avoid re-invoking component mounted hookfor (let i = 1; i < insert.fns.length; i++) {insert.fns[i]()}}} else {registerRef(ancestor)}ancestor = ancestor.parent}}// destroy old nodeif (isDef(parentElm)) {removeVnodes(parentElm, [oldVnode], 0, 0)} else if (isDef(oldVnode.tag)) {invokeDestroyHook(oldVnode)}}}invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)return vnode.elm}
}

createPatchFunction 內部定義了一系列的輔助方法，最終返回了一個 patch 方法，這個方法就賦值給了 vm._update 函數里調用的 vm.__patch__。

在介紹 patch 的方法實現之前，我們可以思考一下為何 Vue.js 源碼繞了這么一大圈，把相關代碼分散到各個目錄。因為前面介紹過，patch 是平臺相關的，在 Web 和 Weex 環境，它們把虛擬 DOM 映射到 “平臺 DOM” 的方法是不同的，并且對 “DOM” 包括的屬性模塊創建和更新也不盡相同。因此每個平臺都有各自的 nodeOps 和 modules，它們的代碼需要托管在 src/platforms 這個大目錄下。

而不同平臺的 patch 的主要邏輯部分是相同的，所以這部分公共的部分托管在 core 這個大目錄下。差異化部分只需要通過參數來區別，這里用到了一個函數柯里化的技巧，通過 createPatchFunction 把差異化參數提前固化，這樣不用每次調用 patch 的時候都傳遞 nodeOps 和 modules 了，這種編程技巧也非常值得學習。

在這里，nodeOps 表示對 “平臺 DOM” 的一些操作方法，modules 表示平臺的一些模塊，它們會在整個 patch 過程的不同階段執行相應的鉤子函數。這些代碼的具體實現會在之后的章節介紹。

回到 patch 方法本身，它接收 4個參數，oldVnode 表示舊的 VNode 節點，它也可以不存在或者是一個 DOM 對象；vnode 表示執行 _render 后返回的 VNode 的節點；hydrating 表示是否是服務端渲染；removeOnly 是給 transition-group 用的，之后會介紹。

patch 的邏輯看上去相對復雜，因為它有著非常多的分支邏輯，為了方便理解，我們并不會在這里介紹所有的邏輯，僅會針對我們之前的例子分析它的執行邏輯。之后我們對其它場景做源碼分析的時候會再次回顧 patch 方法。

先來回顧我們的例子：

var app = new Vue({el: '#app',render: function (createElement) {return createElement('div', {attrs: {id: 'app'},}, this.message)},data: {message: 'Hello Vue!'}
})

然后我們在 vm._update 的方法里是這么調用 patch 方法的：

// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

結合我們的例子，我們的場景是首次渲染，所以在執行 patch 函數的時候，傳入的 vm.$el 對應的是例子中 id 為 app 的 DOM 對象，這個也就是我們在 index.html 模板中寫的 <div id="app">， vm.$el 的賦值是在之前 mountComponent 函數做的，vnode 對應的是調用 render 函數的返回值，hydrating 在非服務端渲染情況下為 false，removeOnly 為 false。

確定了這些入參后，我們回到 patch 函數的執行過程，看幾個關鍵步驟。

const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {// patch existing root nodepatchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
} else {if (isRealElement) {// mounting to a real element// check if this is server-rendered content and if we can perform// a successful hydration.if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {oldVnode.removeAttribute(SSR_ATTR)hydrating = true}if (isTrue(hydrating)) {if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {invokeInsertHook(vnode, insertedVnodeQueue, true)return oldVnode} else if (process.env.NODE_ENV !== 'production') {warn('The client-side rendered virtual DOM tree is not matching ' +'server-rendered content. This is likely caused by incorrect ' +'HTML markup, for example nesting block-level elements inside ' +'<p>, or missing <tbody>. Bailing hydration and performing ' +'full client-side render.')}}// either not server-rendered, or hydration failed.// create an empty node and replace itoldVnode = emptyNodeAt(oldVnode)}// replacing existing elementconst oldElm = oldVnode.elmconst parentElm = nodeOps.parentNode(oldElm)// create new nodecreateElm(vnode,insertedVnodeQueue,// extremely rare edge case: do not insert if old element is in a// leaving transition. Only happens when combining transition +// keep-alive + HOCs. (#4590)oldElm._leaveCb ? null : parentElm,nodeOps.nextSibling(oldElm))
}

由于我們傳入的 oldVnode 實際上是一個 DOM container，所以 isRealElement 為 true，接下來又通過 emptyNodeAt 方法把 oldVnode 轉換成 VNode 對象，然后再調用 createElm 方法，這個方法在這里非常重要，來看一下它的實現：

function createElm(vnode,insertedVnodeQueue,parentElm,refElm,nested,ownerArray,index
) {if (isDef(vnode.elm) && isDef(ownerArray)) {// This vnode was used in a previous render!// now it's used as a new node, overwriting its elm would cause// potential patch errors down the road when it's used as an insertion// reference node. Instead, we clone the node on-demand before creating// associated DOM element for it.vnode = ownerArray[index] = cloneVNode(vnode)}vnode.isRootInsert = !nested // for transition enter checkif (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {return}const data = vnode.dataconst children = vnode.childrenconst tag = vnode.tagif (isDef(tag)) {if (process.env.NODE_ENV !== 'production') {if (data && data.pre) {creatingElmInVPre++}if (isUnknownElement(vnode, creatingElmInVPre)) {warn('Unknown custom element: <' + tag + '> - did you ' +'register the component correctly? For recursive components, ' +'make sure to provide the "name" option.',vnode.context)}}vnode.elm = vnode.ns? nodeOps.createElementNS(vnode.ns, tag): nodeOps.createElement(tag, vnode)setScope(vnode)/* istanbul ignore if */if (__WEEX__) {// ...} else {createChildren(vnode, children, insertedVnodeQueue)if (isDef(data)) {invokeCreateHooks(vnode, insertedVnodeQueue)}insert(parentElm, vnode.elm, refElm)}if (process.env.NODE_ENV !== 'production' && data && data.pre) {creatingElmInVPre--}} else if (isTrue(vnode.isComment)) {vnode.elm = nodeOps.createComment(vnode.text)insert(parentElm, vnode.elm, refElm)} else {vnode.elm = nodeOps.createTextNode(vnode.text)insert(parentElm, vnode.elm, refElm)}
}

createElm 的作用是通過虛擬節點創建真實的 DOM 并插入到它的父節點中。我們來看一下它的一些關鍵邏輯，createComponent 方法目的是嘗試創建子組件，這個邏輯在之后組件的章節會詳細介紹，在當前這個 case 下它的返回值為 false；接下來判斷 vnode 是否包含 tag，如果包含，先簡單對 tag 的合法性在非生產環境下做校驗，看是否是一個合法標簽；然后再去調用平臺 DOM 的操作去創建一個占位符元素。

vnode.elm = vnode.ns? nodeOps.createElementNS(vnode.ns, tag): nodeOps.createElement(tag, vnode)

接下來調用 createChildren 方法去創建子元素：

createChildren(vnode, children, insertedVnodeQueue)function createChildren(vnode, children, insertedVnodeQueue) {if (Array.isArray(children)) {if (process.env.NODE_ENV !== 'production') {checkDuplicateKeys(children)}for (let i = 0; i < children.length; ++i) {createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)}} else if (isPrimitive(vnode.text)) {nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))}
}

createChildren 的邏輯很簡單，實際上是遍歷子虛擬節點，遞歸調用 createElm，這是一種常用的深度優先的遍歷算法，這里要注意的一點是在遍歷過程中會把 vnode.elm 作為父容器的 DOM 節點占位符傳入。

接著再調用 invokeCreateHooks 方法執行所有的 create 的鉤子并把 vnode push 到 insertedVnodeQueue 中。

if (isDef(data)) {invokeCreateHooks(vnode, insertedVnodeQueue)
}function invokeCreateHooks(vnode, insertedVnodeQueue) {for (let i = 0; i < cbs.create.length; ++i) {cbs.create[i](emptyNode, vnode)}i = vnode.data.hook // Reuse variableif (isDef(i)) {if (isDef(i.create)) i.create(emptyNode, vnode)if (isDef(i.insert)) insertedVnodeQueue.push(vnode)}
}

最后調用 insert 方法把 DOM 插入到父節點中，因為是遞歸調用，子元素會優先調用 insert，所以整個 vnode 樹節點的插入順序是先子后父。來看一下 insert 方法，它的定義在 src/core/vdom/patch.js 上。

insert(parentElm, vnode.elm, refElm)function insert(parent, elm, ref) {if (isDef(parent)) {if (isDef(ref)) {if (ref.parentNode === parent) {nodeOps.insertBefore(parent, elm, ref)}} else {nodeOps.appendChild(parent, elm)}}
}

insert 邏輯很簡單，調用一些 nodeOps 把子節點插入到父節點中，這些輔助方法定義在 src/platforms/web/runtime/node-ops.js 中：

export function insertBefore(parentNode: Node, newNode: Node, referenceNode: Node) {parentNode.insertBefore(newNode, referenceNode)
}export function appendChild(node: Node, child: Node) {node.appendChild(child)
}

其實就是調用原生 DOM 的 API 進行 DOM 操作，看到這里，很多同學恍然大悟，原來 Vue 是這樣動態創建的 DOM。

在 createElm 過程中，如果 vnode 節點不包含 tag，則它有可能是一個注釋或者純文本節點，可以直接插入到父元素中。在我們這個例子中，最內層就是一個文本 vnode，它的 text 值取的就是之前的 this.message 的值 Hello Vue!。

再回到 patch 方法，首次渲染我們調用了 createElm 方法，這里傳入的 parentElm 是 oldVnode.elm 的父元素，在我們的例子是 id 為 #app div 的父元素，也就是 Body；實際上整個過程就是遞歸創建了一個完整的 DOM 樹并插入到 Body 上。

最后，我們根據之前遞歸 createElm 生成的 vnode 插入順序隊列，執行相關的 insert 鉤子函數，這部分內容我們之后會詳細介紹。