vue中設(shè)置key與不設(shè)置有什么區(qū)別

    ...

  
    {{item}}

  

在不使用key的情況，vue會進(jìn)行這樣的操作：

分析下整體流程：

• 比較A，A，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 比較B，B，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 比較C，F(xiàn)，相同類型的節(jié)點，進(jìn)行patch，數(shù)據(jù)不同，發(fā)生dom操作

• 比較D，C，相同類型的節(jié)點，進(jìn)行patch，數(shù)據(jù)不同，發(fā)生dom操作

• 比較E，D，相同類型的節(jié)點，進(jìn)行patch，數(shù)據(jù)不同，發(fā)生dom操作

• 循環(huán)結(jié)束，將E插入到DOM中

一共發(fā)生了3次更新，1次插入操作

在使用key的情況：vue會進(jìn)行這樣的操作：

• 比較A，A，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 比較B，B，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 比較C，F(xiàn)，不相同類型的節(jié)點

• 比較E、E，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 比較D、D，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 比較C、C，相同類型的節(jié)點，進(jìn)行patch，但數(shù)據(jù)相同，不發(fā)生dom操作

• 循環(huán)結(jié)束，將F插入到C之前

一共發(fā)生了0次更新，1次插入操作

通過上面兩個小例子，可見設(shè)置key能夠大大減少對頁面的DOM操作，提高了diff效率

設(shè)置key值一定能提高diff效率嗎？

其實不然，文檔中也明確表示

當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素

這個默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出

建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升

三、原理分析

源碼位置：core/vdom/patch.js

里判斷是否為同一個key，首先判斷的是key值是否相等如果沒有設(shè)置key，那么key為undefined，這時候undefined是恒等于undefined

function sameVnode (a, b) {
    return (
        a.key === b.key && (
            (
                a.tag === b.tag &&
                a.isComment === b.isComment &&
                isDef(a.data) === isDef(b.data) &&
                sameInputType(a, b)
            ) || (
                isTrue(a.isAsyncPlaceholder) &&
                a.asyncFactory === b.asyncFactory &&
                isUndef(b.asyncFactory.error)
            )
        )
    )
}

updateChildren方法中會對新舊vnode進(jìn)行diff，然后將比對出的結(jié)果用來更新真實的DOM

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    ...
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (isUndef(oldStartVnode)) {
            ...
        } else if (isUndef(oldEndVnode)) {
            ...
        } else if (sameVnode(oldStartVnode, newStartVnode)) {
            ...
        } else if (sameVnode(oldEndVnode, newEndVnode)) {
            ...
        } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
            ...
        } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
            ...
        } else {
            if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
            idxInOld = isDef(newStartVnode.key)
                ? oldKeyToIdx[newStartVnode.key]
                : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
            if (isUndef(idxInOld)) { // New element
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
            } else {
                vnodeToMove = oldCh[idxInOld]
                if (sameVnode(vnodeToMove, newStartVnode)) {
                    patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
                    oldCh[idxInOld] = undefined
                    canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
                } else {
                    // same key but different element. treat as new element
                    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
                }
            }
            newStartVnode = newCh[++newStartIdx]
        }
    }
    ...
}

讀到這里，這篇“vue中設(shè)置key與不設(shè)置有什么區(qū)別”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。