溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2022-05-20 09:04:18 來源：億速云 閱讀：539 作者：zzz 欄目：編程語言

本文小編為大家詳細(xì)介紹“vue中設(shè)置key與不設(shè)置有什么區(qū)別”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue中設(shè)置key與不設(shè)置有什么區(qū)別”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

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

一、Key是什么

開始之前，我們先還原兩個(gè)實(shí)際工作場(chǎng)景

  • 當(dāng)我們?cè)谑褂?code>v-for時(shí)，需要給單元加上key

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

  • 用+new Date()生成的時(shí)間戳作為key，手動(dòng)強(qiáng)制觸發(fā)重新渲染

<Comp :key="+new Date()" />

那么這背后的邏輯是什么，key的作用又是什么？

一句話來講

key是給每一個(gè)vnode的唯一id，也是diff的一種優(yōu)化策略，可以根據(jù)key，更準(zhǔn)確， 更快的找到對(duì)應(yīng)的vnode節(jié)點(diǎn)。

場(chǎng)景背后的邏輯

當(dāng)我們?cè)谑褂?code>v-for時(shí)，需要給單元加上key

  • 如果不用key，Vue會(huì)采用就地復(fù)地原則：最小化element的移動(dòng)，并且會(huì)嘗試盡最大程度在同適當(dāng)?shù)牡胤綄?duì)相同類型的element，做patch或者reuse。

  • 如果使用了key，Vue會(huì)根據(jù)keys的順序記錄element，曾經(jīng)擁有了key的element如果不再出現(xiàn)的話，會(huì)被直接remove或者destoryed

用+new Date()生成的時(shí)間戳作為key，手動(dòng)強(qiáng)制觸發(fā)重新渲染

  • 當(dāng)擁有新值的rerender作為key時(shí)，擁有了新key的Comp出現(xiàn)了，那么舊key Comp會(huì)被移除，新key Comp觸發(fā)渲染

二、設(shè)置key與不設(shè)置key區(qū)別

舉個(gè)例子：
創(chuàng)建一個(gè)實(shí)例，2秒后往items數(shù)組插入數(shù)據(jù)

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 創(chuàng)建實(shí)例
    const app = new Vue({
      el: '#demo',
      data: { items: ['a', 'b', 'c', 'd', 'e'] },
      mounted () {
        setTimeout(() => { 
          this.items.splice(2, 0, 'f')  // 
       }, 2000);
     },
   });
  </script>
</body>

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

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

分析下整體流程：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其實(shí)不然，文檔中也明確表示

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

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

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

三、原理分析

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

里判斷是否為同一個(gè)key，首先判斷的是key值是否相等如果沒有設(shè)置key，那么key為undefined，這時(shí)候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方法中會(huì)對(duì)新舊vnode進(jìn)行diff，然后將比對(duì)出的結(jié)果用來更新真實(shí)的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)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手