vue?v-for中key的原理詳析

更新時間：2022年04月29日 11:35:10 作者：striving

key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時候,并不會去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下

前言

最近在面試的時候，面試官問我說v-for的key值是用來做什么的，我說是用來遍歷dom元素的根節(jié)點的，當(dāng)節(jié)點更新時，使用key 值來判斷是都需要重新渲染更新頁面，不會再更新之前已經(jīng)被更新的內(nèi)容。面試官問：還有嗎？我：............自己覺得回答的挺美，但是咋感覺面試管的表情不太對呢？

key是什么

常見方式

<div> 
    <span v-for="item in items" :key="item.id">...</span>
</div>

2.時間戳：+new Date()生成的時間戳作為key，手動強制觸發(fā)重新渲染

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

我們常見的使用方式是這樣，但是key的背后的邏輯是什么樣的？ key是給每一個vnode的唯一id，也是diff的一種優(yōu)化策略，可以根據(jù)key，更準(zhǔn)確，更快的找到對應(yīng)的vnode節(jié)點

邏輯

當(dāng)我們在使用v-for時，需要給單元加上key

如果不用key，Vue會采用就地復(fù)地原則：最小化element的移動，并且會嘗試盡最大程度在同適當(dāng)?shù)牡胤綄ο嗤愋偷膃lement，做patch或者reuse。
如果使用了key，Vue會根據(jù)keys的順序記錄element，曾經(jīng)擁有了key的element如果不再出現(xiàn)的話，會被直接remove或者destoryed

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

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

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

創(chuàng)建一個實例，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)建實例
  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的情況下：

分析下整體流程：

比較A，A，相同類型的節(jié)點，進行patch，但數(shù)據(jù)相同，不發(fā)生dom操作
比較B，B，相同類型的節(jié)點，進行patch，但數(shù)據(jù)相同，不發(fā)生dom操作
比較C，F(xiàn)，相同類型的節(jié)點，進行patch，數(shù)據(jù)不同，發(fā)生dom操作
比較D，C，相同類型的節(jié)點，進行patch，數(shù)據(jù)不同，發(fā)生dom操作
比較E，D，相同類型的節(jié)點，進行patch，數(shù)據(jù)不同，發(fā)生dom操作
循環(huán)結(jié)束，將E插入到DOM中

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

在使用key的情況：vue會進行這樣的操作：

比較A，A，相同類型的節(jié)點，進行patch，但數(shù)據(jù)相同，不發(fā)生dom操作
比較B，B，相同類型的節(jié)點，進行patch，但數(shù)據(jù)相同，不發(fā)生dom操作
比較C，F(xiàn)，不相同類型的節(jié)點
- 比較E、E，相同類型的節(jié)點，進行patch，但數(shù)據(jù)相同，不發(fā)生dom操作
比較D、D，相同類型的節(jié)點，進行patch，但數(shù)據(jù)相同，不發(fā)生dom操作
比較C、C，相同類型的節(jié)點，進行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)行為以獲取性能上的提升

原理分析

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)
           ) 
         ) 
       )
    }

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

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]
    }
  }
...
}

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