前言

面試官:"你了解虛擬DOM(Virtual DOM)跟Diff算法嗎,請描述一下它們";

我:"額,...鵝,那個",完了😰,突然智商不在線,沒組織好語言沒答好或者壓根就答不出來;

所以這次我總結(jié)一下相關(guān)的知識點,讓你可以有一個清晰的認(rèn)知之余也會讓你在今后遇到這種情況可以坦然自若,應(yīng)付自如,游刃有余:

虛擬DOM(Virtual DOM)

什么是虛擬DOM

一句話總結(jié)虛擬DOM就是一個用來描述真實DOM的javaScript對象,這樣說可能不夠形象,那我們來舉個🌰:分別用代碼來描述真實DOM以及虛擬DOM

真實DOM: 

<ul class="list">  
    <li>a</li>  
    <li>b</li>  
    <li>c</li>  
</ul> 

對應(yīng)的虛擬DOM: 

let vnode = h('ul.list', [  
  h('li','a'),  
  h('li','b'),  
  h('li','c'),  
])  
console.log(vnode) 

控制臺打印出來的Vnode:

h函數(shù)生成的虛擬DOM這個JS對象(Vnode)的源碼: 

export interface VNodeData {  
    props?: Props  
    attrs?: Attrs  
    class?: Classes  
    style?: VNodeStyle  
    dataset?: Dataset  
    on?: On  
    hero?: Hero  
    attachData?: AttachData  
    hook?: Hooks  
    key?: Key 
     ns?: string // for SVGs 
    fn?: () => VNode // for thunks  
    args?: any[] // for thunks  
    [key: string]: any // for any other 3rd party module  
}  
export type Key = string | number  
const interface VNode = {  
    sel: string | undefined, // 選擇器  
    data: VNodeData | undefined, // VNodeData上面定義的VNodeData  
    children: Array<VNode | string> | undefined, //子節(jié)點,與text互斥  
    text: string | undefined, // 標(biāo)簽中間的文本內(nèi)容 
    elm: Node | undefined, // 轉(zhuǎn)換而成的真實DOM  
    key: Key | undefined // 字符串或者數(shù)字 
 } 

補充:

上面的h函數(shù)大家可能有點熟悉的感覺但是一時間也沒想起來,沒關(guān)系我來幫大伙回憶; 開發(fā)中常見的現(xiàn)實場景,render函數(shù)渲染: 

// 案例1 vue項目中的main.js的創(chuàng)建vue實例  
new Vue({  
  router,  
  store,  
  render: h => h(App)  
}).$mount("#app");  
//案例2 列表中使用render渲染  
columns: [  
    {  
        title: "操作",  
        key: "action",  
        width: 150,  
        render: (h, params) => {  
            return h('div', [  
                h('Button', {  
                    props: {  
                        size: 'small'  
                    },  
                    style: {  
                        marginRight: '5px',  
                        marginBottom: '5px',  
                    },  
                    on: {  
                        click: () => {  
                            this.toEdit(params.row.uuid);  
                        }  
                    }  
                }, '編輯')  
            ]);  
        }  
    }  
] 

為什么要使用虛擬DOM

•  MVVM框架解決視圖和狀態(tài)同步問題
•  模板引擎可以簡化視圖操作,沒辦法跟蹤狀態(tài)
•  虛擬DOM跟蹤狀態(tài)變化
•  參考github上virtual-dom (https://github.com/Matt-Esch/virtual-dom) 的動機描述
  •   虛擬DOM可以維護程序的狀態(tài),跟蹤上一次的狀態(tài)
  •   通過比較前后兩次狀態(tài)差異更新真實DOM
•  跨平臺使用
  •   瀏覽器平臺渲染DOM
  •   服務(wù)端渲染SSR(Nuxt.js/Next.js),前端是vue向,后者是react向
  •   原生應(yīng)用(Weex/React Native)
  •   小程序(mpvue/uni-app)等
•  真實DOM的屬性很多，創(chuàng)建DOM節(jié)點開銷很大
•  虛擬DOM只是普通JavaScript對象，描述屬性并不需要很多，創(chuàng)建開銷很小
•  復(fù)雜視圖情況下提升渲染性能(操作dom性能消耗大,減少操作dom的范圍可以提升性能)

靈魂發(fā)問:使用了虛擬DOM就一定會比直接渲染真實DOM快嗎?答案當(dāng)然是否定的,且聽我說:

舉例:當(dāng)一個節(jié)點變更時DOMA->DOMB

上述情況: 示例1是創(chuàng)建一個DOMB然后替換掉DOMA; 示例2去創(chuàng)建虛擬DOM+DIFF算法比對發(fā)現(xiàn)DOMB跟DOMA不是相同的節(jié)點,最后還是創(chuàng)建一個DOMB然后替換掉DOMA; 可以明顯看出1是更快的,同樣的結(jié)果,2還要去創(chuàng)建虛擬DOM+DIFF算啊對比 所以說使用虛擬DOM比直接操作真實DOM就一定要快這個說法是錯誤的,不嚴(yán)謹(jǐn)?shù)?/p>

舉例:當(dāng)DOM樹里面的某個子節(jié)點的內(nèi)容變更時:

當(dāng)一些復(fù)雜的節(jié)點,比如說一個父節(jié)點里面有多個子節(jié)點,當(dāng)只是一個子節(jié)點的內(nèi)容發(fā)生了改變,那么我們沒有必要像示例1重新去渲染這個DOM樹,這個時候虛擬DOM+DIFF算法就能夠得到很好的體現(xiàn),我們通過示例2使用虛擬DOM+Diff算法去找出改變了的子節(jié)點更新它的內(nèi)容就可以了

總結(jié):復(fù)雜視圖情況下提升渲染性能,因為虛擬DOM+Diff算法可以精準(zhǔn)找到DOM樹變更的地方,減少DOM的操作(重排重繪)

虛擬dom庫

•  Snabbdom (https://github.com/snabbdom/snabbdom)
  •   Vue.js2.x內(nèi)部使用的虛擬DOM就是改造的Snabbdom
  •   大約200SLOC(single line of code)
  •   通過模塊可擴展
  •   源碼使用TypeScript開發(fā)
  •   最快的Virtual DOM之一
•  virtual-dom

Diff算法

在看完上述的文章之后相信大家已經(jīng)對Diff算法有一個初步的概念,沒錯,Diff算法其實就是找出兩者之間的差異;

diff 算法首先要明確一個概念就是 Diff 的對象是虛擬DOM（virtual dom），更新真實 DOM 是 Diff 算法的結(jié)果。

下面我將會手撕snabbdom源碼核心部分為大家打開Diff的心,給點耐心,別關(guān)網(wǎng)頁,

snabbdom的核心

•  init()設(shè)置模塊.創(chuàng)建patch()函數(shù)
•  使用h()函數(shù)創(chuàng)建JavaScript對象(Vnode)描述真實DOM
•  patch()比較新舊兩個Vnode
•  把變化的內(nèi)容更新到真實DOM樹

init函數(shù)

init函數(shù)時設(shè)置模塊,然后創(chuàng)建patch()函數(shù),我們先通過場景案例來有一個直觀的體現(xiàn): 

import {init} from 'snabbdom/build/package/init.js'  
import {h} from 'snabbdom/build/package/h.js'  
// 1.導(dǎo)入模塊  
import {styleModule} from "snabbdom/build/package/modules/style";  
import {eventListenersModule} from "snabbdom/build/package/modules/eventListeners";  
// 2.注冊模塊  
const patch = init([  
  styleModule,  
  eventListenersModule  
])  
// 3.使用h()函數(shù)的第二個參數(shù)傳入模塊中使用的數(shù)據(jù)(對象)  
let vnode = h('div', [  
  h('h1', {style: {backgroundColor: 'red'}}, 'Hello world'),  
  h('p', {on: {click: eventHandler}}, 'Hello P')  
])  
function eventHandler() {  
  alert('疼,別摸我')  
}  
const app = document.querySelector('#app')  
patch(app,vnode) 

當(dāng)init使用了導(dǎo)入的模塊就能夠在h函數(shù)中用這些模塊提供的api去創(chuàng)建虛擬DOM(Vnode)對象;在上文中就使用了樣式模塊以及事件模塊讓創(chuàng)建的這個虛擬DOM具備樣式屬性以及事件屬性,最終通過patch函數(shù)對比兩個虛擬dom(會先把app轉(zhuǎn)換成虛擬dom),更新視圖;

我們再簡單看看init的源碼部分: 

// src/package/init.ts  
/* 第一參數(shù)就是各個模塊  
   第二參數(shù)就是DOMAPI,可以把DOM轉(zhuǎn)換成別的平臺的API,  
也就是說支持跨平臺使用,當(dāng)不傳的時候默認(rèn)是htmlDOMApi,見下文  
   init是一個高階函數(shù),一個函數(shù)返回另外一個函數(shù),可以緩存modules,與domApi兩個參數(shù),  
那么以后直接只傳oldValue跟newValue(vnode)就可以了*/  
export function init (modules: Array<Partial<Module>>, domApi?: DOMAPI) { 
...  
return function patch (oldVnode: VNode | Element, vnode: VNode): VNode {}  
} 

h函數(shù)

些地方也會用createElement來命名,它們是一樣的東西,都是創(chuàng)建虛擬DOM的,在上述文章中相信大伙已經(jīng)對h函數(shù)有一個初步的了解并且已經(jīng)聯(lián)想了使用場景,就不作場景案例介紹了,直接上源碼部分: 

// h函數(shù)  
export function h (sel: string): VNode  
export function h (sel: string, data: VNodeData | null): VNode  
export function h (sel: string, children: VNodeChildren): VNode  
export function h (sel: string, data: VNodeData | null, children: VNodeChildren): VNode  
export function h (sel: any, b?: any, c?: any): VNode {  
  var data: VNodeData = {}  
  var children: any  
  var text: any  
  var i: number  
    ...  
  return vnode(sel, data, children, text, undefined) //最終返回一個vnode函數(shù)  
};  

// vnode函數(shù)  
export function vnode (sel: string | undefined,  
  data: any | undefined,  
  children: Array<VNode | string> | undefined,  
  text: string | undefined,  
  elm: Element | Text | undefined): VNode {  
  const key = data === undefined ? undefined : data.key 
  return { sel, data, children, text, elm, key } //最終生成Vnode對象  
} 

總結(jié):h函數(shù)先生成一個vnode函數(shù),然后vnode函數(shù)再生成一個Vnode對象(虛擬DOM對象)

補充:

在h函數(shù)源碼部分涉及一個函數(shù)重載的概念,簡單說明一下:

•  參數(shù)個數(shù)或參數(shù)類型不同的函數(shù)()
•  JavaScript中沒有重載的概念
•  TypeScript中有重載,不過重載的實現(xiàn)還是通過代碼調(diào)整參數(shù)

重載這個概念個參數(shù)相關(guān),和返回值無關(guān)

•  實例1(函數(shù)重載-參數(shù)個數(shù)) 

function add(a:number,b:number){  
console.log(a+b)  
}  
function add(a:number,b:number,c:number){  
console.log(a+b+c)  
}  
add(1,2)  
add(1,2,3) 

•  實例2(函數(shù)重載-參數(shù)類型) 

function add(a:number,b:number){  
console.log(a+b)  
}  
function add(a:number,b:string){  
console.log(a+b)  
}  
add(1,2)  
add(1,'2')  
patch函數(shù)(核心) 

要是看完前面的鋪墊,看到這里你可能走神了,醒醒啊,這是核心啊,上高地了兄弟;

•  pactch(oldVnode,newVnode)
•  把新節(jié)點中變化的內(nèi)容渲染到真實DOM,最后返回新節(jié)點作為下一次處理的舊節(jié)點(核心)
•  對比新舊VNode是否相同節(jié)點(節(jié)點的key和sel相同)
•  如果不是相同節(jié)點,刪除之前的內(nèi)容,重新渲染
•  如果是相同節(jié)點,再判斷新的VNode是否有text,如果有并且和oldVnode的text不同直接更新文本內(nèi)容(patchVnode)
•  如果新的VNode有children,判斷子節(jié)點是否有變化(updateChildren,最麻煩,最難實現(xiàn))

源碼: 

return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {    
    let i: number, elm: Node, parent: Node  
    const insertedVnodeQueue: VNodeQueue = []  
    // cbs.pre就是所有模塊的pre鉤子函數(shù)集合  
    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]() 
    // isVnode函數(shù)時判斷oldVnode是否是一個虛擬DOM對象  
    if (!isVnode(oldVnode)) {  
        // 若不是即把Element轉(zhuǎn)換成一個虛擬DOM對象  
        oldVnode = emptyNodeAt(oldVnode)  
    }  
    // sameVnode函數(shù)用于判斷兩個虛擬DOM是否是相同的,源碼見補充1;  
    if (sameVnode(oldVnode, vnode)) {  
        // 相同則運行patchVnode對比兩個節(jié)點,關(guān)于patchVnode后面會重點說明(核心)  
        patchVnode(oldVnode, vnode, insertedVnodeQueue)  
    } else {  
        elm = oldVnode.elm! // !是ts的一種寫法代碼oldVnode.elm肯定有值  
        // parentNode就是獲取父元素 
        parent = api.parentNode(elm) as Node  
        // createElm是用于創(chuàng)建一個dom元素插入到vnode中(新的虛擬DOM)  
        createElm(vnode, insertedVnodeQueue)  
        if (parent !== null) {  
            // 把dom元素插入到父元素中,并且把舊的dom刪除  
            api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))// 把新創(chuàng)建的元素放在舊的dom后面  
            removeVnodes(parent, [oldVnode], 0, 0)  
        }  
    }  
    for (i = 0; i < insertedVnodeQueue.length; ++i) {  
        insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i])  
    }  
    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()  
    return vnode  
} 

補充1: sameVnode函數(shù) 

function sameVnode(vnode1: VNode, vnode2: VNode): boolean { 通過key和sel選擇器判斷是否是相同節(jié)點  
    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel  
} 

patchVnode

•  第一階段觸發(fā)prepatch函數(shù)以及update函數(shù)(都會觸發(fā)prepatch函數(shù),兩者不完全相同才會觸發(fā)update函數(shù))
•  第二階段,真正對比新舊vnode差異的地方
•  第三階段,觸發(fā)postpatch函數(shù)更新節(jié)點

源碼: 

function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {  
    const hook = vnode.data?.hook  
    hook?.prepatch?.(oldVnode, vnode)  
    const elm = vnode.elm = oldVnode.elm!  
    const oldCh = oldVnode.children as VNode[]  
    const ch = vnode.children as VNode[]  
    if (oldVnode === vnode) return  
    if (vnode.data !== undefined) { 
         for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)  
        vnode.data.hook?.update?.(oldVnode, vnode)  
    }  
    if (isUndef(vnode.text)) { // 新節(jié)點的text屬性是undefined  
        if (isDef(oldCh) && isDef(ch)) { // 當(dāng)新舊節(jié)點都存在子節(jié)點  
            if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) //并且他們的子節(jié)點不相同執(zhí)行updateChildren函數(shù),后續(xù)會重點說明(核心)  
        } else if (isDef(ch)) { // 只有新節(jié)點有子節(jié)點  
            // 當(dāng)舊節(jié)點有text屬性就會把''賦予給真實dom的text屬性  
            if (isDef(oldVnode.text)) api.setTextContent(elm, '')   
            // 并且把新節(jié)點的所有子節(jié)點插入到真實dom中  
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)  
        } else if (isDef(oldCh)) { // 清除真實dom的所有子節(jié)點  
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)  
        } else if (isDef(oldVnode.text)) { // 把''賦予給真實dom的text屬性  
            api.setTextContent(elm, '')  
        } 
 
    } else if (oldVnode.text !== vnode.text) { //若舊節(jié)點的text與新節(jié)點的text不相同  
        if (isDef(oldCh)) { // 若舊節(jié)點有子節(jié)點,就把所有的子節(jié)點刪除  
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)  
        }  
        api.setTextContent(elm, vnode.text!) // 把新節(jié)點的text賦予給真實dom  
    }  
    hook?.postpatch?.(oldVnode, vnode) // 更新視圖  
} 

看得可能有點蒙蔽,下面再上一副思維導(dǎo)圖:

題外話:diff算法簡介

傳統(tǒng)diff算法

•  虛擬DOM中的Diff算法
•  傳統(tǒng)算法查找兩顆樹每一個節(jié)點的差異
•  會運行n1(dom1的節(jié)點數(shù))*n2(dom2的節(jié)點數(shù))次方去對比,找到差異的部分再去更新

snabbdom的diff算法優(yōu)化

•  Snbbdom根據(jù)DOM的特點對傳統(tǒng)的diff算法做了優(yōu)化
•  DOM操作時候很少會跨級別操作節(jié)點
•  只比較同級別的節(jié)點

下面我們就會介紹updateChildren函數(shù)怎么去對比子節(jié)點的異同,也是Diff算法里面的一個核心以及難點;

updateChildren(核中核:判斷子節(jié)點的差異)

•  這個函數(shù)我分為三個部分,部分1:聲明變量,部分2:同級別節(jié)點比較,部分3:循環(huán)結(jié)束的收尾工作(見下圖);

•  同級別節(jié)點比較的五種情況:

1.   oldStartVnode/newStartVnode(舊開始節(jié)點/新開始節(jié)點)相同
2.   oldEndVnode/newEndVnode(舊結(jié)束節(jié)點/新結(jié)束節(jié)點)相同
3.   oldStartVnode/newEndVnode(舊開始節(jié)點/新結(jié)束節(jié)點)相同
4.   oldEndVnode/newStartVnode(舊結(jié)束節(jié)點/新開始節(jié)點)相同
5.   特殊情況當(dāng)1,2,3,4的情況都不符合的時候就會執(zhí)行,在oldVnodes里面尋找跟newStartVnode一樣的節(jié)點然后位移到oldStartVnode,若沒有找到在就oldStartVnode創(chuàng)建一個

•  執(zhí)行過程是一個循環(huán),在每次循環(huán)里,只要執(zhí)行了上述的情況的五種之一就會結(jié)束一次循環(huán)
•  循環(huán)結(jié)束的收尾工作:直到oldStartIdx>oldEndIdx || newStartIdx>newEndIdx(代表舊節(jié)點或者新節(jié)點已經(jīng)遍歷完)

為了更加直觀的了解,我們再來看看同級別節(jié)點比較的五種情況的實現(xiàn)細(xì)節(jié):

新開始節(jié)點和舊開始節(jié)點(情況1)

•  若情況1符合:(從新舊節(jié)點的開始節(jié)點開始對比,oldCh[oldStartIdx]和newCh[newStartIdx]進行sameVnode(key和sel相同)判斷是否相同節(jié)點)
•  則執(zhí)行patchVnode找出兩者之間的差異,更新圖;如沒有差異則什么都不操作,結(jié)束一次循環(huán)
•  oldStartIdx++/newStartIdx++

新結(jié)束節(jié)點和舊結(jié)束節(jié)點(情況2)

•  若情況1不符合就判斷情況2,若符合:(從新舊節(jié)點的結(jié)束節(jié)點開始對比,oldCh[oldEndIdx]和newCh[newEndIdx]對比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點)
•  執(zhí)行patchVnode找出兩者之間的差異,更新視圖,;如沒有差異則什么都不操作,結(jié)束一次循環(huán)
•  oldEndIdx--/newEndIdx--

舊開始節(jié)點/新結(jié)束節(jié)點(情況3)

•  若情況1,2都不符合,就會嘗試情況3:(舊節(jié)點的開始節(jié)點與新節(jié)點的結(jié)束節(jié)點開始對比,oldCh[oldStartIdx]和newCh[newEndIdx]對比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點)
•  執(zhí)行patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結(jié)束一次循環(huán)
•  oldCh[oldStartIdx]對應(yīng)的真實dom位移到oldCh[oldEndIdx]對應(yīng)的真實dom后
•  oldStartIdx++/newEndIdx--;

舊結(jié)束節(jié)點/新開始節(jié)點(情況4)

•  若情況1,2,3都不符合,就會嘗試情況4:(舊節(jié)點的結(jié)束節(jié)點與新節(jié)點的開始節(jié)點開始對比,oldCh[oldEndIdx]和newCh[newStartIdx]對比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點)
•  執(zhí)行patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結(jié)束一次循環(huán)
•  oldCh[oldEndIdx]對應(yīng)的真實dom位移到oldCh[oldStartIdx]對應(yīng)的真實dom前
•  oldEndIdx--/newStartIdx++;

新開始節(jié)點/舊節(jié)點數(shù)組中尋找節(jié)點(情況5)

•  從舊節(jié)點里面尋找,若尋找到與newCh[newStartIdx]相同的節(jié)點(且叫對應(yīng)節(jié)點[1]),執(zhí)行patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結(jié)束一次循環(huán)
•  對應(yīng)節(jié)點[1]對應(yīng)的真實dom位移到oldCh[oldStartIdx]對應(yīng)的真實dom前

•  若沒有尋找到相同的節(jié)點,則創(chuàng)建一個與newCh[newStartIdx]節(jié)點對應(yīng)的真實dom插入到oldCh[oldStartIdx]對應(yīng)的真實dom前
•  newStartIdx++

下面我們再介紹一下結(jié)束循環(huán)的收尾工作(oldStartIdx>oldEndIdx || newStartIdx>newEndIdx):

•  新節(jié)點的所有子節(jié)點先遍歷完(newStartIdx>newEndIdx),循環(huán)結(jié)束
•  新節(jié)點的所有子節(jié)點遍歷結(jié)束就是把沒有對應(yīng)相同節(jié)點的子節(jié)點刪除

•  舊節(jié)點的所有子節(jié)點先遍歷完(oldStartIdx>oldEndIdx),循環(huán)結(jié)束
•  舊節(jié)點的所有子節(jié)點遍歷結(jié)束就是在多出來的子節(jié)點插入到舊節(jié)點結(jié)束節(jié)點前;(源碼:newCh[newEndIdx + 1].elm),就是對應(yīng)的舊結(jié)束節(jié)點的真實dom,newEndIdx+1是因為在匹配到相同的節(jié)點需要-1,所以需要加回來就是結(jié)束節(jié)點

最后附上源碼: 

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {  
    let oldStartIdx = 0;                // 舊節(jié)點開始節(jié)點索引  
    let newStartIdx = 0;                // 新節(jié)點開始節(jié)點索引  
    let oldEndIdx = oldCh.length - 1;   // 舊節(jié)點結(jié)束節(jié)點索引  
    let oldStartVnode = oldCh[0];       // 舊節(jié)點開始節(jié)點  
    let oldEndVnode = oldCh[oldEndIdx]; // 舊節(jié)點結(jié)束節(jié)點  
    let newEndIdx = newCh.length - 1;   // 新節(jié)點結(jié)束節(jié)點索引  
    let newStartVnode = newCh[0];       // 新節(jié)點開始節(jié)點  
    let newEndVnode = newCh[newEndIdx]; // 新節(jié)點結(jié)束節(jié)點  
    let oldKeyToIdx;                    // 節(jié)點移動相關(guān)  
    let idxInOld;                       // 節(jié)點移動相關(guān)  
    let elmToMove;                      // 節(jié)點移動相關(guān)  
    let before;  
    // 同級別節(jié)點比較  
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {  
        if (oldStartVnode == null) {  
            oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left  
        }  
        else if (oldEndVnode == null) {  
            oldEndVnode = oldCh[--oldEndIdx];  
        }  
        else if (newStartVnode == null) {  
            newStartVnode = newCh[++newStartIdx];  
        }  
        else if (newEndVnode == null) {  
            newEndVnode = newCh[--newEndIdx];  
        }  
        else if (sameVnode(oldStartVnode, newStartVnode)) { // 判斷情況1  
            patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);  
            oldStartVnode = oldCh[++oldStartIdx];  
            newStartVnode = newCh[++newStartIdx];  
        }  
        else if (sameVnode(oldEndVnode, newEndVnode)) {   // 情況2  
            patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);  
            oldEndVnode = oldCh[--oldEndIdx];  
            newEndVnode = newCh[--newEndIdx];  
        }  
        else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right情況3  
            patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);  
            api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));  
            oldStartVnode = oldCh[++oldStartIdx];  
            newEndVnode = newCh[--newEndIdx];  
        }  
        else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left情況4  
            patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);  
            api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);  
            oldEndVnode = oldCh[--oldEndIdx];  
            newStartVnode = newCh[++newStartIdx];  
        }  
        else {                                             // 情況5  
            if (oldKeyToIdx === undefined) {  
                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);  
            }  
            idxInOld = oldKeyToIdx[newStartVnode.key];  
            if (isUndef(idxInOld)) { // New element        // 創(chuàng)建新的節(jié)點在舊節(jié)點的新節(jié)點前  
                api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);  
            }  
            else {  
                elmToMove = oldCh[idxInOld];  
                if (elmToMove.sel !== newStartVnode.sel) { // 創(chuàng)建新的節(jié)點在舊節(jié)點的新節(jié)點前  
                    api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);  
                }  
                else {  
                                                           // 在舊節(jié)點數(shù)組中找到相同的節(jié)點就對比差異更新視圖,然后移動位置  
                    patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);  
                    oldCh[idxInOld] = undefined;  
                    api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);  
                } 
            }  
            newStartVnode = newCh[++newStartIdx];  
        }  
    }  
    // 循環(huán)結(jié)束的收尾工作  
    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {  
        if (oldStartIdx > oldEndIdx) {  
            // newCh[newEndIdx + 1].elm就是舊節(jié)點數(shù)組中的結(jié)束節(jié)點對應(yīng)的dom元素  
            // newEndIdx+1是因為在之前成功匹配了newEndIdx需要-1  
            // newCh[newEndIdx + 1].elm,因為已經(jīng)匹配過有相同的節(jié)點了,它就是等于舊節(jié)點數(shù)組中的結(jié)束節(jié)點對應(yīng)的dom元素(oldCh[oldEndIdx + 1].elm)  
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;  
            // 把新節(jié)點數(shù)組中多出來的節(jié)點插入到before前  
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);  
        }  
        else {  
            // 這里就是把沒有匹配到相同節(jié)點的節(jié)點刪除掉  
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);  
        }  
    }  
} 

key的作用

•  Diff操作可以更加快速;
•  Diff操作可以更加準(zhǔn)確;(避免渲染錯誤)
•  不推薦使用索引作為key

以下我們看看這些作用的實例:

Diff操作可以更加準(zhǔn)確;(避免渲染錯誤):

實例:a,b,c三個dom元素中的b,c間插入一個z元素

沒有設(shè)置key 

當(dāng)設(shè)置了key:

 

Diff操作可以更加準(zhǔn)確;(避免渲染錯誤)

實例:a,b,c三個dom元素,修改了a元素的某個屬性再去在a元素前新增一個z元素

沒有設(shè)置key:

因為沒有設(shè)置key,默認(rèn)都是undefined,所以節(jié)點都是相同的,更新了text的內(nèi)容但還是沿用了之前的dom,所以實際上a->z(a原本打勾的狀態(tài)保留了,只改變了text),b->a,c->b,d->c,遍歷完畢發(fā)現(xiàn)還要增加一個dom,在最后新增一個text為d的dom元素

設(shè)置了key:

當(dāng)設(shè)置了key,a,b,c,d都有對應(yīng)的key,a->a,b->b,c->c,d->d,內(nèi)容相同無需更新,遍歷結(jié)束,新增一個text為z的dom元素

不推薦使用索引作為key:

設(shè)置索引為key:

這明顯效率不高,我們只希望找出不同的節(jié)點更新,而使用索引作為key會增加運算時間,我們可以把key設(shè)置為與節(jié)點text為一致就可以解決這個問題: