站長資訊網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數組插入數據
<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: '#demo', data: { items: ['a', 'b', 'c', 'd', 'e'] }, mounted () { setTimeout(() => { this.items.splice(2, 0, 'f') // }, 2000); }, }); </script> </body>
在不使用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操作
- 比較E、E，相同類型的節點，進行
- 比較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 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升
三、原理分析
源碼位置：core/vdom/patch.js
里判斷是否為同一個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前端開發、編程基礎視頻）
