//vue項(xiàng)目 src/core/vdom/patch.js -448行
//oldCh是一個(gè)舊虛擬節(jié)點(diǎn)數(shù)組
if(isUndef(oldKeyToIdx)){
    oldKeyToIdx = createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx)
}
if(isDef(newStartVnode.key)){
    //map方式獲取
    idxInOld = oldKeyToIdx[newStartVnode.key]
}else {
    //遍歷方式獲取
    idxInOld = findIdxInOld(newStartVnode,oldCh,oldStartIdx,oldEndIdx)
}

function createKeyToOldIdx(children,beginIdx,endIdx){
    let i,key
    const map = {}
    for(i = beginIdx;i<=endIdx;i++){
        key = children[i].key
        if(isDef(key)) map[key] = i    
    }
    return map
}

//sameVnode 是對比新舊節(jié)點(diǎn)是否相同的函數(shù)
function findIdxInOld(node,oldCh,start,end){
    for(let i = start;i<end;i++){
        const c = oldCh[i]
        if(isDef(c) && sameVnode(node,c)) return i    
    }
}

<div id="app">
    <div v-for="i in dataList">{{ i }}</div>
</div>
var vm = new Vue({
    el:'#app',
    data:{
        dataList:[1,2,3,4,5]    
    }
})

[
    '<div>1</div>',//id:A
    '<div>2</div>',//id:B
    '<div>3</div>',//id:C
    '<div>4</div>',//id:D
    '<div>5</div>',//id:E
]

vm.dataList = [4,1,3,5,2]//數(shù)據(jù)位置替換
//沒有key的情況，節(jié)點(diǎn)位置不變，但是節(jié)點(diǎn)innerText內(nèi)容更新了
[
    '<div>4</div>',//id:A
    '<div>1</div>',//id:B
    '<div>3</div>',//id:C
    '<div>5</div>',//id:D
    '<div>2</div>',//id:E
]
//有key的情況，dom節(jié)點(diǎn)位置進(jìn)行了交換，但是內(nèi)容沒有更新
// <div v-for="i in dataList" :key='i'>{{ i }}</div>
[
    '<div>4</div>',//id:D
    '<div>1</div>',//id:A
    '<div>3</div>',//id:C
    '<div>5</div>',//id:E
    '<div>2</div>',//id:B
]

vm.dataList = [3,4,5,6,7] //數(shù)據(jù)進(jìn)行增刪
// 1、沒有key的情況，節(jié)點(diǎn)位置不變，內(nèi)容也更新了
[
    '<div>3</div>',//id:A
    '<div>4</div>',//id:B
    '<div>5</div>',//id:C
    '<div>6</div>',//id:D
    '<div>7</div>',//id:E
]
// 2、有key的情況，節(jié)點(diǎn)刪除了A B節(jié)點(diǎn)，新增了F G節(jié)點(diǎn)
// <div v-for="i in dataLIST" :key='i'>{{ i }}</div>
[
    '<div>3</div>',//id:C
    '<div>4</div>',//id:D
    '<div>5</div>',//id:E
    '<div>6</div>',//id:F
    '<div>7</div>',//id:G
]