前言

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

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

所以這次我總結一下相關的知識點,讓你可以有一個清晰的認知之余也會讓你在今后遇到這種情況可以坦然自若,應付自如,游刃有余:

虛擬DOM(Virtual DOM)

什么是虛擬DOM

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

真實DOM: 

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

對應的虛擬DOM: 

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

控制臺打印出來的Vnode:

h函數生成的虛擬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, //子節點,與text互斥  
    text: string | undefined, // 標簽中間的文本內容 
    elm: Node | undefined, // 轉換而成的真實DOM  
    key: Key | undefined // 字符串或者數字 
 } 

補充:

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

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

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

舉例:當一個節點變更時DOMA->DOMB

上述情況: 示例1是創建一個DOMB然后替換掉DOMA; 示例2去創建虛擬DOM+DIFF算法比對發現DOMB跟DOMA不是相同的節點,最后還是創建一個DOMB然后替換掉DOMA; 可以明顯看出1是更快的,同樣的結果,2還要去創建虛擬DOM+DIFF算啊對比 所以說使用虛擬DOM比直接操作真實DOM就一定要快這個說法是錯誤的,不嚴謹的

舉例:當DOM樹里面的某個子節點的內容變更時:

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

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

虛擬dom庫

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

Diff算法

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

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

下面我將會手撕snabbdom源碼核心部分為大家打開Diff的心,給點耐心,別關網頁,

snabbdom的核心

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

init函數

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

import {init} from 'snabbdom/build/package/init.js'  
import {h} from 'snabbdom/build/package/h.js'  
// 1.導入模塊  
import {styleModule} from "snabbdom/build/package/modules/style";  
import {eventListenersModule} from "snabbdom/build/package/modules/eventListeners";  
// 2.注冊模塊  
const patch = init([  
  styleModule,  
  eventListenersModule  
])  
// 3.使用h()函數的第二個參數傳入模塊中使用的數據(對象)  
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) 

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

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

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

h函數

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

// h函數  
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函數  
};  

// vnode函數  
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對象  
} 

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

補充:

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

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

重載這個概念個參數相關,和返回值無關

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

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(函數重載-參數類型) 

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函數(核心) 

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

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

源碼: 

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

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

patchVnode

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

源碼: 

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

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

題外話:diff算法簡介

傳統diff算法

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

snabbdom的diff算法優化

•  Snbbdom根據DOM的特點對傳統的diff算法做了優化
•  DOM操作時候很少會跨級別操作節點
•  只比較同級別的節點

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

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

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

•  同級別節點比較的五種情況:

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

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

為了更加直觀的了解,我們再來看看同級別節點比較的五種情況的實現細節:

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

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

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

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

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

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

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

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

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

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

•  若沒有尋找到相同的節點,則創建一個與newCh[newStartIdx]節點對應的真實dom插入到oldCh[oldStartIdx]對應的真實dom前
•  newStartIdx++

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

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

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

最后附上源碼: 

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {  
    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;                    // 節點移動相關  
    let idxInOld;                       // 節點移動相關  
    let elmToMove;                      // 節點移動相關  
    let before;  
    // 同級別節點比較  
    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        // 創建新的節點在舊節點的新節點前  
                api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);  
            }  
            else {  
                elmToMove = oldCh[idxInOld];  
                if (elmToMove.sel !== newStartVnode.sel) { // 創建新的節點在舊節點的新節點前  
                    api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);  
                }  
                else {  
                                                           // 在舊節點數組中找到相同的節點就對比差異更新視圖,然后移動位置  
                    patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);  
                    oldCh[idxInOld] = undefined;  
                    api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);  
                } 
            }  
            newStartVnode = newCh[++newStartIdx];  
        }  
    }  
    // 循環結束的收尾工作  
    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {  
        if (oldStartIdx > oldEndIdx) {  
            // newCh[newEndIdx + 1].elm就是舊節點數組中的結束節點對應的dom元素  
            // newEndIdx+1是因為在之前成功匹配了newEndIdx需要-1  
            // newCh[newEndIdx + 1].elm,因為已經匹配過有相同的節點了,它就是等于舊節點數組中的結束節點對應的dom元素(oldCh[oldEndIdx + 1].elm)  
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;  
            // 把新節點數組中多出來的節點插入到before前  
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);  
        }  
        else {  
            // 這里就是把沒有匹配到相同節點的節點刪除掉  
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);  
        }  
    }  
} 

key的作用

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

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

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

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

沒有設置key 

當設置了key:

 

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

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

沒有設置key:

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

設置了key:

當設置了key,a,b,c,d都有對應的key,a->a,b->b,c->c,d->d,內容相同無需更新,遍歷結束,新增一個text為z的dom元素

不推薦使用索引作為key:

設置索引為key:

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