淺析Vue原始碼（九）——VirtualDOM與path

摘要： 在未出現雙向繫結之前，我們需要在各個觸發事件方法中直接操作DOM節點來達到修改相應檢視的目的。但是當應用一大就會變得難以維護，reflow(迴流)很影響效能的。 因此就有人提出來，那我們是不是可以把真實DOM樹抽象成一棵以JavaScript物件構成的抽象樹，在修改抽象樹資料後將抽象樹轉化...

在未出現雙向繫結之前，我們需要在各個觸發事件方法中直接操作DOM節點來達到修改相應檢視的目的。但是當應用一大就會變得難以維護，reflow(迴流)很影響效能的。

因此就有人提出來，那我們是不是可以把真實DOM樹抽象成一棵以JavaScript物件構成的抽象樹，在修改抽象樹資料後將抽象樹轉化成真實DOM重繪到頁面上呢？於是虛擬DOM出現了，它是真實DOM的一層抽象，用屬性描述真實DOM的各個特性。當它發生變化的時候，就會去修改檢視。

可以想象，如果用最簡單粗暴的方法將整個DOM結構用innerHTML修改到頁面上，那麼這樣進行重繪整個檢視層是相當消耗效能的，那是不是可以考慮每次只更新它修改的部分呢？所以Vue.js將DOM抽象成一個以JavaScript物件為節點的虛擬DOM樹，以VNode節點模擬真實DOM，可以對這顆抽象樹進行建立節點、刪除節點以及修改節點等操作，在這過程中都不需要操作真實DOM，只需要操作JavaScript物件後只對差異修改，相對於整塊的innerHTML的粗暴式修改，大大提升了效能。修改以後經過diff演算法得出一些需要修改的最小單位，再將這些小單位的檢視進行更新。這樣做減少了很多不需要的DOM操作，大大提高了效能。

Vue就使用了這樣的抽象節點VNode，它是對真實DOM的一層抽象，而不依賴某個平臺，它可以是瀏覽器平臺，也可以是weex，甚至是node平臺也可以對這樣一棵抽象DOM樹進行建立刪除修改等操作，這也為前後端同構提供了可能。

具體VNode的細節可以看 ofollow,noindex">淺析Vue原始碼（七）——render到VNode的生成 。

如何修改檢視呢？

前文已經介紹了Vue是通過資料繫結來修改檢視的，當某個資料被修改的時候，set方法會讓閉包中的Dep呼叫notify通知所有訂閱者Watcher，Watcher通過get方法執行vm._update(vm._render(), hydrating)。

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
/*如果已經該元件已經掛載過了則代表進入這個步驟是個更新的過程，觸發beforeUpdate鉤子*/
if (vm._isMounted) {
callHook(vm, 'beforeUpdate')
}
const prevEl = vm.$el
const prevVnode = vm._vnode
const prevActiveInstance = activeInstance
activeInstance = vm
vm._vnode = vnode
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
/*基於後端渲染Vue.prototype.__patch__被用來作為一個入口*/
if (!prevVnode) {
// initial render
vm.$el = vm.__patch__(
vm.$el, vnode, hydrating, false /* removeOnly */,
vm.$options._parentElm,
vm.$options._refElm
)
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode)
}
activeInstance = prevActiveInstance
// update __vue__ reference
/*更新新的例項物件的__vue__*/
if (prevEl) {
prevEl.__vue__ = null
}
if (vm.$el) {
vm.$el.__vue__ = vm
}
// if parent is an HOC, update its $el as well
if (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方法的第一個引數是一個VNode物件，在內部會將該VNode物件與之前舊的VNode物件進行__patch_。

那究竟什麼是path？

path

patch將新老VNode節點進行比對，然後將根據兩者的比較結果進行最小單位地修改檢視，而不是將整個檢視根據新的VNode重繪。patch的核心在於diff演算法，這套演算法可以高效地比較virtual DOM的變更，得出變化以修改檢視。

那麼patch如何工作的呢？

首先說一下patch的核心diff演算法，diff演算法是通過 同層的樹節點 進行比較而非對樹進行逐層搜尋遍歷的方式，所以時間複雜度只有O(n)，是一種相當高效的演算法。

這兩張圖代表舊的VNode與新VNode進行patch的過程，他們只是在 同層級的VNode 之間進行比較得到變化（第二張圖中相同顏色的方塊代表互相進行比較的VNode節點），然後修改變化的檢視，所以十分高效。

通過前面的介紹，我們知道需要將VNode轉換成真實的DOMe節點，需要通過patch函式來實現：

vm.$el = vm.__patch__(prevVnode, vnode)
複製程式碼

而__patch__是在platforms/web/runtime/index.js中定義的:

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
複製程式碼

這裡主要是為了判斷當前環境是否是在瀏覽器環境中，也就是是否存在Window物件。這裡也是為了做跨平臺的處理，如果是在server render環境，那麼patch就是一個空操作。 那接下來我們來看看path原始碼(src/core/vdom/patch.js)。

/*createPatchFunction的返回值，一個patch函式*/
return function patch (oldVnode, vnode, hydrating, removeOnly) {
/*vnode不存在則直接呼叫銷燬鉤子*/
if (isUndef(vnode)) {
if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
return
}

let isInitialPatch = false
const insertedVnodeQueue = []

if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
/*oldVnode未定義的時候，其實也就是root節點，建立一個新的節點*/
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
} else {
/*標記舊的VNode是否有nodeType*/
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
/*是同一個節點的時候直接修改現有的節點*/
patchVnode(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)) {
/*當舊的VNode是服務端渲染的元素，hydrating記為true*/
oldVnode.removeAttribute(SSR_ATTR)
hydrating = true
}
if (isTrue(hydrating)) {
/*需要合併到真實DOM上*/
if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
/*呼叫insert鉤子*/
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 it
/*如果不是服務端渲染或者合併到真實DOM失敗，則建立一個空的VNode節點替換它*/
oldVnode = emptyNodeAt(oldVnode)
}

// replacing existing element
/*取代現有元素*/
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)

// create new node
createElm(
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, recursively
if (isDef(vnode.parent)) {
/*元件根節點被替換，遍歷更新父節點element*/
let ancestor = vnode.parent
const patchable = isPatchable(vnode)
while (ancestor) {
for (let i = 0; i < cbs.destroy.length; ++i) {
cbs.destroy[i](ancestor)
}
ancestor.elm = vnode.elm
if (patchable) {
/*呼叫create回撥*/
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.insert
if (insert.merged) {
// start at index 1 to avoid re-invoking component mounted hook
for (let i = 1; i < insert.fns.length; i++) {
insert.fns[i]()
}
}
} else {
registerRef(ancestor)
}
ancestor = ancestor.parent
}
}

// destroy old node
if (isDef(parentElm)) {
/*移除老節點*/
removeVnodes(parentElm, [oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
/*呼叫destroy鉤子*/
invokeDestroyHook(oldVnode)
}
}
}
/*呼叫insert鉤子*/
invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
return vnode.elm
}
複製程式碼

這裡通過createPatchFunction函式，來建立返回一個patch函式。path接收6個引數：

1.oldVnode: 舊的虛擬節點或舊的真實dom節點

2.vnode: 新的虛擬節點

3.hydrating: 是否要跟真實dom合併

4.removeOnly: 特殊flag，用於元件

5.parentElm:父節點

6.refElm: 新節點將插入到refElm之前

具體解析看程式碼註釋~拋開呼叫生命週期鉤子和銷燬就節點不談，我們發現程式碼中的關鍵在於sameVnode、 createElm 和 patchVnode 方法。

sameVnode

我們來看一下sameVnode的實現。

/*
判斷兩個VNode節點是否是同一個節點，需要滿足以下條件
key相同
tag（當前節點的標籤名）相同
isComment（是否為註釋節點）相同
是否data（當前節點對應的物件，包含了具體的一些資料資訊，是一個VNodeData型別，可以參考VNodeData型別中的資料資訊）都有定義
當標籤是<input>的時候，type必須相同
*/
function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
) || (
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)
)
)
)
}

// Some browsers do not support dynamically changing type for <input>
// so they need to be treated as different nodes
/*
判斷當標籤是<input>的時候，type是否相同
某些瀏覽器不支援動態修改<input>型別，所以他們被視為不同型別
*/
function sameInputType (a, b) {
if (a.tag !== 'input') return true
let i
const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}
複製程式碼

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)
}
// 用於建立元件，在呼叫了元件初始化鉤子之後，初始化元件，並且重新啟用元件。
// 在重新啟用元件中使用 insert 方法操作 DOM
vnode.isRootInsert = !nested // for transition enter check
if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
return
}

const data = vnode.data
const children = vnode.children
const tag = vnode.tag
if (isDef(tag)) {
// 錯誤檢測，主要用於判斷是否正確註冊了component，這個錯誤還是比較常見
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
)
}
}
// nodeOps 封裝的操作dom的合集
vnode.elm = vnode.ns
? nodeOps.createElementNS(vnode.ns, tag)
: nodeOps.createElement(tag, vnode)
setScope(vnode)
// weex處理
/* istanbul ignore if */
if (__WEEX__) {
// in Weex, the default insertion order is parent-first.
// List items can be optimized to use children-first insertion
// with append="tree".
const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
if (!appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
createChildren(vnode, children, insertedVnodeQueue)
if (appendAsTree) {
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
insert(parentElm, vnode.elm, refElm)
}
} else {
// 用於建立子節點，如果子節點是陣列，則遍歷執行 createElm 方法.
// 如果子節點的 text 屬性有資料，則使用 nodeOps.appendChild(...) 在真實 DOM 中插入文字內容。
createChildren(vnode, children, insertedVnodeQueue)
if (isDef(data)) {
invokeCreateHooks(vnode, insertedVnodeQueue)
}
// insert 用於將元素插入真實 DOM 中
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 物件

patchVnode

還是先來看一下patchVnode的程式碼。

/*patch VNode節點*/
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
/*兩個VNode節點相同則直接返回*/
if (oldVnode === vnode) {
return
}

const elm = vnode.elm = oldVnode.elm

if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
} else {
vnode.isAsyncPlaceholder = true
}
return
}

// reuse element for static trees.
// note we only do this if the vnode is cloned -
// if the new node is not cloned it means the render functions have been
// reset by the hot-reload-api and we need to do a proper re-render.
/*
如果新舊VNode都是靜態的，同時它們的key相同（代表同一節點），
並且新的VNode是clone或者是標記了once（標記v-once屬性，只渲染一次），
那麼只需要替換elm以及componentInstance即可。
*/
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}

let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
/*i = data.hook.prepatch，如果存在的話，見"./create-component componentVNodeHooks"。*/
i(oldVnode, vnode)
}

const oldCh = oldVnode.children
const ch = vnode.children
if (isDef(data) && isPatchable(vnode)) {
/*呼叫update回撥以及update鉤子*/
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
/*如果這個VNode節點沒有text文字時*/
if (isUndef(vnode.text)) {
if (isDef(oldCh) && isDef(ch)) {
/*新老節點均有children子節點，則對子節點進行diff操作，呼叫updateChildren*/
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
/*如果老節點沒有子節點而新節點存在子節點，先清空elm的文字內容，然後為當前節點加入子節點*/
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) {
/*當新節點沒有子節點而老節點有子節點的時候，則移除所有ele的子節點*/
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
/*當新老節點都無子節點的時候，只是文字的替換，因為這個邏輯中新節點text不存在，所以直接去除ele的文字*/
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
/*當新老節點text不一樣時，直接替換這段文字*/
nodeOps.setTextContent(elm, vnode.text)
}
/*呼叫postpatch鉤子*/
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
複製程式碼

patchVnode的規則是這樣的：

1.如果新舊VNode都是靜態的，同時它們的key相同（代表同一節點），並且新的VNode是clone或者是標記了once（標記v-once屬性，只渲染一次），那麼只需要替換elm以及componentInstance即可。

2.新老節點均有children子節點，則對子節點進行diff操作，呼叫updateChildren，這個updateChildren也是diff的核心。

3.如果老節點沒有子節點而新節點存在子節點，先清空老節點DOM的文字內容，然後為當前DOM節點加入子節點。

4.當新節點沒有子節點而老節點有子節點的時候，則移除該DOM節點的所有子節點。

5.當新老節點都無子節點的時候，只是文字的替換。

updateChildren

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
let oldStartIdx = 0
let newStartIdx = 0
let oldEndIdx = oldCh.length - 1
let oldStartVnode = oldCh[0]
let oldEndVnode = oldCh[oldEndIdx]
let newEndIdx = newCh.length - 1
let newStartVnode = newCh[0]
let newEndVnode = newCh[newEndIdx]
let oldKeyToIdx, idxInOld, vnodeToMove, refElm

// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly

if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(newCh)
}

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)) {
/*前四種情況其實是指定key的時候，判定為同一個VNode，則直接patchVnode即可，分別比較oldCh以及newCh的兩頭節點2*2=4種情況*/
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 {
/*
生成一個key與舊VNode的key對應的雜湊表（只有第一次進來undefined的時候會生成，也為後面檢測重複的key值做鋪墊）
比如childre是這樣的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]beginIdx = 0endIdx = 2
結果生成{key0: 0, key1: 1, key2: 2}
*/
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
/*如果newStartVnode新的VNode節點存在key並且這個key在oldVnode中能找到則返回這個節點的idxInOld（即第幾個節點，下標）*/
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (isUndef(idxInOld)) { // New element
/*newStartVnode沒有key或者是該key沒有在老節點中找到則建立一個新的節點*/
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {
/*獲取同key的老節點*/
vnodeToMove = oldCh[idxInOld]
if (sameVnode(vnodeToMove, newStartVnode)) {
/*如果新VNode與得到的有相同key的節點是同一個VNode則進行patchVnode*/
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
/*因為已經patchVnode進去了，所以將這個老節點賦值undefined，之後如果還有新節點與該節點key相同可以檢測出來提示已有重複的key*/
oldCh[idxInOld] = undefined
/*當有標識位canMove實可以直接插入oldStartVnode對應的真實DOM節點前面*/
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// same key but different element. treat as new element
/*當新的VNode與找到的同樣key的VNode不是sameVNode的時候（比如說tag不一樣或者是有不一樣type的input標籤），建立一個新的節點*/
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
newStartVnode = newCh[++newStartIdx]
}
}
if (oldStartIdx > oldEndIdx) {
/*全部比較完成以後，發現oldStartIdx > oldEndIdx的話，說明老節點已經遍歷完了，新節點比老節點多，所以這時候多出來的新節點需要一個一個創建出來加入到真實DOM中*/
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
/*如果全部比較完成以後發現newStartIdx > newEndIdx，則說明新節點已經遍歷完了，老節點多餘新節點，這個時候需要將多餘的老節點從真實DOM中移除*/
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}
}
複製程式碼

讓我們來畫張圖屢一下大致的流程：

可能你看到這還是雲裡霧裡有點理不清，沒關係，接下來我們一點一點來消化：

定義初始變數：

let oldStartIdx = 0 // 舊列表起點位置
let newStartIdx = 0 // 新列表起點位置
let oldEndIdx = oldCh.length - 1 // 舊列表終點位置
let oldStartVnode = oldCh[0] // 舊列表起點值
let oldEndVnode = oldCh[oldEndIdx] // 舊列表終點值
let newEndIdx = newCh.length - 1 // 新列表終點位置
let newStartVnode = newCh[0] // 新列表起點值
let newEndVnode = newCh[newEndIdx] // 新列表終點值
複製程式碼

首先，在新老兩個VNode節點的左右頭尾兩側都有一個變數標記，在遍歷過程中這幾個變數都會向中間靠攏。當oldStartIdx > oldEndIdx或者newStartIdx > newEndIdx時結束迴圈。

索引與VNode節點的對應關係： oldStartIdx => oldStartVnode oldEndIdx => oldEndVnode newStartIdx => newStartVnode newEndIdx => newEndVnode

在遍歷中，如果存在key，並且滿足sameVnode，會將該DOM節點進行復用，否則則會建立一個新的DOM節點。

首先，oldStartVnode、oldEndVnode與newStartVnode、newEndVnode兩兩比較一共有2*2=4種比較方法。

當新老VNode節點的start或者end滿足sameVnode時，也就是sameVnode(oldStartVnode, newStartVnode)或者sameVnode(oldEndVnode, newEndVnode)，直接將該VNode節點進行patchVnode即可。

如果oldStartVnode與newEndVnode滿足sameVnode，即sameVnode(oldStartVnode, newEndVnode)。

這時候說明oldStartVnode已經跑到了oldEndVnode後面去了，進行patchVnode的同時還需要將真實DOM節點移動到oldEndVnode的後面。

如果oldEndVnode與newStartVnode滿足sameVnode，即sameVnode(oldEndVnode, newStartVnode)。

這說明oldEndVnode跑到了oldStartVnode的前面，進行patchVnode的同時真實的DOM節點移動到了oldStartVnode的前面。

如果以上情況均不符合，則通過createKeyToOldIdx會得到一個oldKeyToIdx，裡面存放了一個key為舊的VNode，value為對應index序列的雜湊表。從這個雜湊表中可以找到是否有與newStartVnode一致key的舊的VNode節點，如果同時滿足sameVnode，patchVnode的同時會將這個真實DOM（elmToMove）移動到oldStartVnode對應的真實DOM的前面。

當然也有可能newStartVnode在舊的VNode節點找不到一致的key，或者是即便key相同卻不是sameVnode，這個時候會呼叫createElm建立一個新的DOM節點。

到這裡迴圈已經結束了，那麼剩下我們還需要處理多餘或者不夠的真實DOM節點。

1.當結束時oldStartIdx > oldEndIdx，這個時候老的VNode節點已經遍歷完了，但是新的節點還沒有。說明了新的VNode節點實際上比老的VNode節點多，也就是比真實DOM多，需要將剩下的（也就是新增的）VNode節點插入到真實DOM節點中去，此時呼叫addVnodes（批量呼叫createElm的介面將這些節點加入到真實DOM中去）。

2。同理，當newStartIdx > newEndIdx時，新的VNode節點已經遍歷完了，但是老的節點還有剩餘，說明真實DOM節點多餘了，需要從文件中刪除，這時候呼叫removeVnodes將這些多餘的真實DOM刪除。

總結

到這裡，patch的主要功能也基本講完了，我們發現，在本篇中，大量出現了一個key欄位。經過上面的調研，其實我們已經知道Vue的diff演算法中其核心是基於兩個簡單的假設：

1.兩個相同的元件產生類似的DOM結構，不同的元件產生不同的DOM結構

2.同一層級的一組節點，他們可以通過唯一的id進行區分 基於以上這兩點假設，使得虛擬DOM的Diff演算法的複雜度從O(n^3)降到了O(n)，當頁面的資料發生變化時，Diff演算法只會比較同一層級的節點：

所以一句話，key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。

感謝 染陌老師 提供的素材。

要是喜歡的話可以給我一個star, github