前言

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

我:"額,...鵝,那個(gè)",完了😰,突然智商不在線,沒(méi)組織好語(yǔ)言沒(méi)答好或者壓根就答不出來(lái);

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

虛擬DOM(Virtual DOM)

什么是虛擬DOM

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

真實(shí)DOM: 

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

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

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

控制臺(tái)打印出來(lái)的Vnode:

h函數(shù)生成的虛擬DOM這個(gè)JS對(duì)象(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é)點(diǎn),與text互斥  
    text: string | undefined, // 標(biāo)簽中間的文本內(nèi)容 
    elm: Node | undefined, // 轉(zhuǎn)換而成的真實(shí)DOM  
    key: Key | undefined // 字符串或者數(shù)字 
 } 

補(bǔ)充:

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

// 案例1 vue項(xiàng)目中的main.js的創(chuàng)建vue實(shí)例  
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)同步問(wèn)題
•  模板引擎可以簡(jiǎn)化視圖操作,沒(méi)辦法跟蹤狀態(tài)
•  虛擬DOM跟蹤狀態(tài)變化
•  參考github上virtual-dom (https://github.com/Matt-Esch/virtual-dom) 的動(dòng)機(jī)描述
  •   虛擬DOM可以維護(hù)程序的狀態(tài),跟蹤上一次的狀態(tài)
  •   通過(guò)比較前后兩次狀態(tài)差異更新真實(shí)DOM
•  跨平臺(tái)使用
  •   瀏覽器平臺(tái)渲染DOM
  •   服務(wù)端渲染SSR(Nuxt.js/Next.js),前端是vue向,后者是react向
  •   原生應(yīng)用(Weex/React Native)
  •   小程序(mpvue/uni-app)等
•  真實(shí)DOM的屬性很多，創(chuàng)建DOM節(jié)點(diǎn)開(kāi)銷(xiāo)很大
•  虛擬DOM只是普通JavaScript對(duì)象，描述屬性并不需要很多，創(chuàng)建開(kāi)銷(xiāo)很小
•  復(fù)雜視圖情況下提升渲染性能(操作dom性能消耗大,減少操作dom的范圍可以提升性能)

靈魂發(fā)問(wèn):使用了虛擬DOM就一定會(huì)比直接渲染真實(shí)DOM快嗎?答案當(dāng)然是否定的,且聽(tīng)我說(shuō):

舉例:當(dāng)一個(gè)節(jié)點(diǎn)變更時(shí)DOMA->DOMB

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

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

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

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

虛擬dom庫(kù)

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

Diff算法

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

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

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

snabbdom的核心

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

init函數(shù)

init函數(shù)時(shí)設(shè)置模塊,然后創(chuàng)建patch()函數(shù),我們先通過(guò)場(chǎng)景案例來(lái)有一個(gè)直觀的體現(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.注冊(cè)模塊  
const patch = init([  
  styleModule,  
  eventListenersModule  
])  
// 3.使用h()函數(shù)的第二個(gè)參數(shù)傳入模塊中使用的數(shù)據(jù)(對(duì)象)  
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)對(duì)象;在上文中就使用了樣式模塊以及事件模塊讓創(chuàng)建的這個(gè)虛擬DOM具備樣式屬性以及事件屬性,最終通過(guò)patch函數(shù)對(duì)比兩個(gè)虛擬dom(會(huì)先把a(bǔ)pp轉(zhuǎn)換成虛擬dom),更新視圖;

我們?cè)俸?jiǎn)單看看init的源碼部分: 

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

h函數(shù)

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

// 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) //最終返回一個(gè)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對(duì)象  
} 

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

補(bǔ)充:

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

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

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

•  實(shí)例1(函數(shù)重載-參數(shù)個(gè)數(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) 

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

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é)點(diǎn)中變化的內(nèi)容渲染到真實(shí)DOM,最后返回新節(jié)點(diǎn)作為下一次處理的舊節(jié)點(diǎn)(核心)
•  對(duì)比新舊VNode是否相同節(jié)點(diǎn)(節(jié)點(diǎn)的key和sel相同)
•  如果不是相同節(jié)點(diǎn),刪除之前的內(nèi)容,重新渲染
•  如果是相同節(jié)點(diǎn),再判斷新的VNode是否有text,如果有并且和oldVnode的text不同直接更新文本內(nèi)容(patchVnode)
•  如果新的VNode有children,判斷子節(jié)點(diǎn)是否有變化(updateChildren,最麻煩,最難實(shí)現(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ù)時(shí)判斷oldVnode是否是一個(gè)虛擬DOM對(duì)象  
    if (!isVnode(oldVnode)) {  
        // 若不是即把Element轉(zhuǎn)換成一個(gè)虛擬DOM對(duì)象  
        oldVnode = emptyNodeAt(oldVnode)  
    }  
    // sameVnode函數(shù)用于判斷兩個(gè)虛擬DOM是否是相同的,源碼見(jiàn)補(bǔ)充1;  
    if (sameVnode(oldVnode, vnode)) {  
        // 相同則運(yùn)行patchVnode對(duì)比兩個(gè)節(jié)點(diǎn),關(guān)于patchVnode后面會(huì)重點(diǎn)說(shuō)明(核心)  
        patchVnode(oldVnode, vnode, insertedVnodeQueue)  
    } else {  
        elm = oldVnode.elm! // !是ts的一種寫(xiě)法代碼oldVnode.elm肯定有值  
        // parentNode就是獲取父元素 
        parent = api.parentNode(elm) as Node  
        // createElm是用于創(chuàng)建一個(gè)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  
} 

補(bǔ)充1: sameVnode函數(shù) 

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

patchVnode

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

源碼: 

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é)點(diǎn)的text屬性是undefined  
        if (isDef(oldCh) && isDef(ch)) { // 當(dāng)新舊節(jié)點(diǎn)都存在子節(jié)點(diǎn)  
            if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) //并且他們的子節(jié)點(diǎn)不相同執(zhí)行updateChildren函數(shù),后續(xù)會(huì)重點(diǎn)說(shuō)明(核心)  
        } else if (isDef(ch)) { // 只有新節(jié)點(diǎn)有子節(jié)點(diǎn)  
            // 當(dāng)舊節(jié)點(diǎn)有text屬性就會(huì)把''賦予給真實(shí)dom的text屬性  
            if (isDef(oldVnode.text)) api.setTextContent(elm, '')   
            // 并且把新節(jié)點(diǎn)的所有子節(jié)點(diǎn)插入到真實(shí)dom中  
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)  
        } else if (isDef(oldCh)) { // 清除真實(shí)dom的所有子節(jié)點(diǎn)  
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)  
        } else if (isDef(oldVnode.text)) { // 把''賦予給真實(shí)dom的text屬性  
            api.setTextContent(elm, '')  
        } 
 
    } else if (oldVnode.text !== vnode.text) { //若舊節(jié)點(diǎn)的text與新節(jié)點(diǎn)的text不相同  
        if (isDef(oldCh)) { // 若舊節(jié)點(diǎn)有子節(jié)點(diǎn),就把所有的子節(jié)點(diǎn)刪除  
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)  
        }  
        api.setTextContent(elm, vnode.text!) // 把新節(jié)點(diǎn)的text賦予給真實(shí)dom  
    }  
    hook?.postpatch?.(oldVnode, vnode) // 更新視圖  
} 

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

題外話:diff算法簡(jiǎn)介

傳統(tǒng)diff算法

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

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

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

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

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

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

•  同級(jí)別節(jié)點(diǎn)比較的五種情況:

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

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

為了更加直觀的了解,我們?cè)賮?lái)看看同級(jí)別節(jié)點(diǎn)比較的五種情況的實(shí)現(xiàn)細(xì)節(jié):

新開(kāi)始節(jié)點(diǎn)和舊開(kāi)始節(jié)點(diǎn)(情況1)

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

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

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

舊開(kāi)始節(jié)點(diǎn)/新結(jié)束節(jié)點(diǎn)(情況3)

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

舊結(jié)束節(jié)點(diǎn)/新開(kāi)始節(jié)點(diǎn)(情況4)

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

新開(kāi)始節(jié)點(diǎn)/舊節(jié)點(diǎn)數(shù)組中尋找節(jié)點(diǎn)(情況5)

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

•  若沒(méi)有尋找到相同的節(jié)點(diǎn),則創(chuàng)建一個(gè)與newCh[newStartIdx]節(jié)點(diǎn)對(duì)應(yīng)的真實(shí)dom插入到oldCh[oldStartIdx]對(duì)應(yīng)的真實(shí)dom前
•  newStartIdx++

下面我們?cè)俳榻B一下結(jié)束循環(huán)的收尾工作(oldStartIdx>oldEndIdx || newStartIdx>newEndIdx):

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

•  舊節(jié)點(diǎn)的所有子節(jié)點(diǎn)先遍歷完(oldStartIdx>oldEndIdx),循環(huán)結(jié)束
•  舊節(jié)點(diǎn)的所有子節(jié)點(diǎn)遍歷結(jié)束就是在多出來(lái)的子節(jié)點(diǎn)插入到舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)前;(源碼:newCh[newEndIdx + 1].elm),就是對(duì)應(yīng)的舊結(jié)束節(jié)點(diǎn)的真實(shí)dom,newEndIdx+1是因?yàn)樵谄ヅ涞较嗤墓?jié)點(diǎn)需要-1,所以需要加回來(lái)就是結(jié)束節(jié)點(diǎn)

最后附上源碼: 

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {  
    let oldStartIdx = 0;                // 舊節(jié)點(diǎn)開(kāi)始節(jié)點(diǎn)索引  
    let newStartIdx = 0;                // 新節(jié)點(diǎn)開(kāi)始節(jié)點(diǎn)索引  
    let oldEndIdx = oldCh.length - 1;   // 舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)索引  
    let oldStartVnode = oldCh[0];       // 舊節(jié)點(diǎn)開(kāi)始節(jié)點(diǎn)  
    let oldEndVnode = oldCh[oldEndIdx]; // 舊節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)  
    let newEndIdx = newCh.length - 1;   // 新節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)索引  
    let newStartVnode = newCh[0];       // 新節(jié)點(diǎn)開(kāi)始節(jié)點(diǎn)  
    let newEndVnode = newCh[newEndIdx]; // 新節(jié)點(diǎn)結(jié)束節(jié)點(diǎn)  
    let oldKeyToIdx;                    // 節(jié)點(diǎn)移動(dòng)相關(guān)  
    let idxInOld;                       // 節(jié)點(diǎn)移動(dòng)相關(guān)  
    let elmToMove;                      // 節(jié)點(diǎn)移動(dòng)相關(guān)  
    let before;  
    // 同級(jí)別節(jié)點(diǎn)比較  
    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é)點(diǎn)在舊節(jié)點(diǎn)的新節(jié)點(diǎn)前  
                api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);  
            }  
            else {  
                elmToMove = oldCh[idxInOld];  
                if (elmToMove.sel !== newStartVnode.sel) { // 創(chuàng)建新的節(jié)點(diǎn)在舊節(jié)點(diǎn)的新節(jié)點(diǎn)前  
                    api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);  
                }  
                else {  
                                                           // 在舊節(jié)點(diǎn)數(shù)組中找到相同的節(jié)點(diǎn)就對(duì)比差異更新視圖,然后移動(dòng)位置  
                    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é)點(diǎn)數(shù)組中的結(jié)束節(jié)點(diǎn)對(duì)應(yīng)的dom元素  
            // newEndIdx+1是因?yàn)樵谥俺晒ζヅ淞薾ewEndIdx需要-1  
            // newCh[newEndIdx + 1].elm,因?yàn)橐呀?jīng)匹配過(guò)有相同的節(jié)點(diǎn)了,它就是等于舊節(jié)點(diǎn)數(shù)組中的結(jié)束節(jié)點(diǎn)對(duì)應(yīng)的dom元素(oldCh[oldEndIdx + 1].elm)  
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;  
            // 把新節(jié)點(diǎn)數(shù)組中多出來(lái)的節(jié)點(diǎn)插入到before前  
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);  
        }  
        else {  
            // 這里就是把沒(méi)有匹配到相同節(jié)點(diǎn)的節(jié)點(diǎn)刪除掉  
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);  
        }  
    }  
} 

key的作用

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

以下我們看看這些作用的實(shí)例:

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

實(shí)例:a,b,c三個(gè)dom元素中的b,c間插入一個(gè)z元素

沒(méi)有設(shè)置key 

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

 

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

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

沒(méi)有設(shè)置key:

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

設(shè)置了key:

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

不推薦使用索引作為key:

設(shè)置索引為key:

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