首頁 >web前端 >Vue.js >vue中什麼是Key？設定key與不設定有什麼差別？

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

青灯夜游轉載: 2022-05-19 21:09:454254瀏覽

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，手動強制觸發重新渲染

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

建立一個實例，2秒後往

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

key

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

vue中什麼是Key？設定key與不設定有什麼差別？分析下整體流程：

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

，但資料相同，不發生dom操作比較B，B，相同類型的節點，進行
，但資料相同，不發生dom操作比較C，F，相同類型的節點，進行
，資料不同，發生dom操作#比較D，C，相同類型的節點，進行
，資料不同，發生dom操作比較E，D，相同類型的節點，進行
，資料不同，發生dom操作循環結束，將E插入到

在使用

key

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

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

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

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

key

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

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

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

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

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

建議盡可能在使用

v-for

時提供 key，除非遍歷輸出的DOM 內容非常簡單，或是刻意依賴預設行為以取得效能上的提升<h2 data-id="heading-4"><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中文網其他相關文章！

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：vue父子組件間如何進行通訊？（附範例）下一篇：vue父子組件間如何進行通訊？（附範例）

看更多