站長資訊網(wǎng)vue中什么是Key？下面本篇文章給大家介紹一下vue中key的原理，聊聊設(shè)置key與不設(shè)置key的區(qū)別，希望對大家有所幫助！
一、Key是什么
開始之前，我們先還原兩個實際工作場景
-
當(dāng)我們在使用
v-for時，需要給單元加上key
<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
-
用
+new Date()生成的時間戳作為key，手動強制觸發(fā)重新渲染
<Comp :key="+new Date()" />
那么這背后的邏輯是什么，key的作用又是什么？
一句話來講
key是給每一個vnode的唯一id，也是diff的一種優(yōu)化策略，可以根據(jù)key，更準確， 更快的找到對應(yīng)的vnode節(jié)點。（學(xué)習(xí)視頻分享：vue視頻教程）
場景背后的邏輯
當(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的Comp出現(xiàn)了，那么舊key Comp會被移除，新key Comp觸發(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的情況，vue會進行這樣的操作：
分析下整體流程：
- 比較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操作
- 比較E、E，相同類型的節(jié)點，進行
- 比較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 正在更新已渲染過的元素列表時，它默認用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素
這個默認的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出
建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升
三、原理分析
源碼位置：core/vdom/patch.js
里判斷是否為同一個key，首先判斷的是key值是否相等如果沒有設(shè)置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，然后將比對出的結(jié)果用來更新真實的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] } } ... }
（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）
