vue中什麼是Key？設定key與不設定有什麼差別？

vue中什麼是Key？以下這篇文章跟大家介紹一下vue中key的原理，聊聊設定key與不設定key的差別，希望對大家有幫助！

一、Key是什麼

#開始之前，我們先還原兩個實際工作場景

• #當我們在使用v-for時，需要為單元加上key

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

• #用 new Date()產生的時間戳記作為key，手動強制觸發重新渲染

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

那麼這背後的邏輯是什麼，key的作用又是什麼？

一句話來講

key是給每一個vnode的唯一id，也是diff的一種最佳化策略，可以根據key，更準確， 更快的找到對應的vnode節點。 （學習影片分享：vue影片教學）

場景背後的邏輯

當我們在使用v-for 時，需要為單元加上key

• 如果不用key，Vue會採用就地複地原則：最小化element的移動，並且會嘗試盡最大程度在同適當的地方對相同類型的element，做patch或reuse。
• 如果使用了key，Vue會根據keys的順序記錄element，曾經擁有了key的element如果不再出現的話，會被直接remove或者destoryed

##用

new Date()產生的時間戳記作為key，手動強制觸發重新渲染

當擁有新值的rerender作為key時，擁有了新key的Comp出現了，那麼舊key Comp會被移除，新key Comp觸發渲染

二、設定key與不設定key區別##舉個範例：

建立一個實例，2秒後往

items
陣列插入資料<pre class='brush:php;toolbar:false;'>&lt;body&gt; &lt;div id=&quot;demo&quot;&gt; &lt;p v-for=&quot;item in items&quot; :key=&quot;item&quot;&gt;{{item}}&lt;/p&gt; &lt;/div&gt; &lt;script src=&quot;../../dist/vue.js&quot;&gt;&lt;/script&gt; &lt;script&gt; // 创建实例 const app = new Vue({ el: &amp;#39;#demo&amp;#39;, data: { items: [&amp;#39;a&amp;#39;, &amp;#39;b&amp;#39;, &amp;#39;c&amp;#39;, &amp;#39;d&amp;#39;, &amp;#39;e&amp;#39;] }, mounted () { setTimeout(() =&gt; { this.items.splice(2, 0, &amp;#39;f&amp;#39;) // }, 2000); }, }); &lt;/script&gt; &lt;/body&gt;</pre>在不使用

key

的情況，vue會進行這樣的操作：

分析下整體流程：

比較A，A，相同類型的節點，進行

patch
• ，但資料相同，不發生dom操作比較B，B，相同類型的節點，進行
patch
• ，但資料相同，不發生dom操作比較C，F，相同類型的節點，進行
patch
• ，資料不同，發生dom操作#比較D，C，相同類型的節點，進行
patch
• ，資料不同，發生dom操作比較E，D，相同類型的節點，進行
patch
• ，資料不同，發生dom操作循環結束，將E插入到
DOM
#一共發生了3次更新，1次插入操作

在使用

key

的情況：vue會進行這樣的操作：

比較A，A，相同類型的節點，進行

patch
• ，但資料相同，不發生dom操作比較B，B，相同類型的節點，進行
patch
• ，但資料相同，不發生dom操作比較C，F，不相同類型的節點
• 比較E、E，相同類型的節點，進行
  patch
  • ，但資料相同，不發生dom操作
  比較D、D，相同類型的節點，進行
patch
• ，但資料相同，不發生dom操作比較C、C，相同類型的節點，進行
patch
• ，但資料相同，不發生dom操作循環結束，將F插入到C之前
• 一共發生了0次更新，1次插入操作

透過上面兩個小例子，可見設定

key

能夠大幅減少對頁面的DOM操作，提高了diff效率

#設定key值一定能提高diff效率嗎？

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

當Vue.js 用v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果資料項目的順序被改變，Vue 將不會移動DOM 元素來匹配資料項目的順序， 而是簡單地複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素 

這個預設的模式是高效率的，但只適用於不依賴子元件狀態或暫時DOM 狀態(例如：表單輸入值) 的清單渲染輸出 

建議盡可能在使用 

v-for

 時提供 key，除非遍歷輸出的DOM 內容非常簡單，或是刻意依賴預設行為以取得效能上的提升<h2 id="strong-三-原理分析-strong"><strong>三、原理分析</strong></h2> <p>源码位置：core/vdom/patch.js </p> <p>里判断是否为同一个<code>key，首先判断的是key值是否相等如果没有设置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进行diff，然后将比对出的结果用来更新真实的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]
        }
    }
    ...
}

（学习视频分享：web前端开发、编程基础视频）

以上是vue中什麼是Key？設定key與不設定有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！