摘要：，文本節(jié)點(diǎn)的比較，需要修改，則會(huì)調(diào)用。兩個(gè)節(jié)點(diǎn)都有子節(jié)點(diǎn)，而且它們不一樣，這樣我們會(huì)調(diào)用函數(shù)比較子節(jié)點(diǎn)，這是的核心。，新節(jié)點(diǎn)沒有子節(jié)點(diǎn)，老節(jié)點(diǎn)有子節(jié)點(diǎn)，直接刪除老節(jié)點(diǎn)。參考文章解析的算法

function sameVnode(oldVnode, vnode){
    return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
}

如果值得比較會(huì)執(zhí)行patchVnode(oldVnode, vnode)

如果不值得比較，新節(jié)點(diǎn)直接把老節(jié)點(diǎn)整個(gè)替換了

patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
        if (oldCh && ch && oldCh !== ch) {
            updateChildren(el, oldCh, ch)
        }else if (ch){
            createEle(vnode) //create el"s children dom
        }else if (oldCh){
            api.removeChildren(el)
        }
    }
}

節(jié)點(diǎn)的比較有5種情況

if (oldVnode === vnode)，他們的引用一致，可以認(rèn)為沒有變化。

if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本節(jié)點(diǎn)的比較，需要修改，則會(huì)調(diào)用Node.textContent = vnode.text。

if( oldCh && ch && oldCh !== ch ), 兩個(gè)節(jié)點(diǎn)都有子節(jié)點(diǎn)，而且它們不一樣，這樣我們會(huì)調(diào)用updateChildren函數(shù)比較子節(jié)點(diǎn)，這是diff的核心。

else if (ch)，只有新的節(jié)點(diǎn)有子節(jié)點(diǎn)，調(diào)用createEle(vnode)，vnode.el已經(jīng)引用了老的dom節(jié)點(diǎn)，createEle函數(shù)會(huì)在老dom節(jié)點(diǎn)上添加子節(jié)點(diǎn)。

else if (oldCh)，新節(jié)點(diǎn)沒有子節(jié)點(diǎn)，老節(jié)點(diǎn)有子節(jié)點(diǎn)，直接刪除老節(jié)點(diǎn)。

updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, 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) {   //對(duì)于vnode.key的比較，會(huì)把oldVnode = null
                oldStartVnode = oldCh[++oldStartIdx] 
            }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)) {
                patchVnode(oldStartVnode, newStartVnode)
                oldStartVnode = oldCh[++oldStartIdx]
                newStartVnode = newCh[++newStartIdx]
            }else if (sameVnode(oldEndVnode, newEndVnode)) {
                patchVnode(oldEndVnode, newEndVnode)
                oldEndVnode = oldCh[--oldEndIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newEndVnode)) {
                patchVnode(oldStartVnode, newEndVnode)
                api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
                oldStartVnode = oldCh[++oldStartIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldEndVnode, newStartVnode)) {
                patchVnode(oldEndVnode, newStartVnode)
                api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
                oldEndVnode = oldCh[--oldEndIdx]
                newStartVnode = newCh[++newStartIdx]
            }else {
               // 使用key時(shí)的比較
                if (oldKeyToIdx === undefined) {
                    oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
                }
                idxInOld = oldKeyToIdx[newStartVnode.key]
                if (!idxInOld) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    newStartVnode = newCh[++newStartIdx]
                }
                else {
                    elmToMove = oldCh[idxInOld]
                    if (elmToMove.sel !== newStartVnode.sel) {
                        api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    }else {
                        patchVnode(elmToMove, newStartVnode)
                        oldCh[idxInOld] = null
                        api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                    }
                    newStartVnode = newCh[++newStartIdx]
                }
            }
        }
        if (oldStartIdx > oldEndIdx) {
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
        }else if (newStartIdx > newEndIdx) {
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
}

主要的思路大概就是，定義變量，分別記錄當(dāng)前比較的新、舊節(jié)點(diǎn)中的首尾索引與節(jié)點(diǎn)（oldStartVnode、oldEndVnode、newStartVnode、newEndVnode）（后續(xù)稱為比較區(qū)間）

(圖片來自：https://github.com/aooy/blog/... )

通過對(duì) oldStartVnode、oldEndVnode、newStartVnode、newEndVnode 做,兩兩的 sameVnode 比較

比較判斷有4種，按順序依次比較
oldStartVnode —— newStartVnode （頭對(duì)頭）
oldEndVnode —— newEndVnode （尾對(duì)尾）
oldStartVnode —— newEndVnode （頭對(duì)尾）
oldEndVnode —— newStartVnode （尾對(duì)頭）

如果其中一種比較成立了，那么oldVode中的相應(yīng)節(jié)點(diǎn)會(huì) 以當(dāng)前比較區(qū)間為基準(zhǔn) 移到newVnode相應(yīng)的位置上，
然后比較區(qū)間會(huì)根據(jù)當(dāng)前的比較條件類型，以頭或尾為縮小比較區(qū)間的方向，縮小區(qū)間

例如： 當(dāng)oldStartVnode，newEndVnode值得比較時(shí), 將oldStartVnode.el移動(dòng)到oldEndVnode.el后邊

當(dāng)4種比較都不成立時(shí)，會(huì)使用key去比較，并在最終都使newVode的比較區(qū)間，頭部 減1

當(dāng)oldVnode的key列表中能匹配到對(duì)應(yīng)的key時(shí)，判斷比較節(jié)點(diǎn)的選擇器屬性是否一樣

不一樣則直接在當(dāng)前比較區(qū)間的頭部,新創(chuàng)建一個(gè)newVnode的Dom插入

比較節(jié)點(diǎn)中的oldVnode無需處理，因?yàn)楹竺娴谋容^中不會(huì)有成立的比較條件，最終會(huì)直接刪除節(jié)點(diǎn)

如果一樣則將比較節(jié)點(diǎn)中的oldVnode移動(dòng)到當(dāng)前比較區(qū)間的頭部（所以為節(jié)點(diǎn)設(shè)置key可以更高效的利用dom），并將比較區(qū)間中oldVnode原本的索引位置賦值為Null

如果最終key列表也沒能匹配到的話，也是直接在當(dāng)前比較區(qū)間的頭部,新創(chuàng)建一個(gè)newVnode的Dom插入。

最后在結(jié)束時(shí)會(huì)存在2種情況

oldStartIdx > oldEndIdx

oldVnode先遍歷完，證明newVode有新增的節(jié)點(diǎn)，或者一致，這種情況會(huì)將newVode剩余的節(jié)點(diǎn)插入到oldVnode比較區(qū)間的末尾

newStartIdx > newEndIdx

這時(shí)是newVode先遍歷完，證明newVode里刪除了某些節(jié)點(diǎn)，此時(shí)oldVnode的比較區(qū)間節(jié)點(diǎn)是已經(jīng)不存在的，會(huì)將他們刪除。

參考文章：解析vue2.0的diff算法