站長(zhǎng)資訊網(wǎng)vue中什么是Key？下面本篇文章給大家介紹一下vue中key的原理，聊聊設(shè)置key與不設(shè)置key的區(qū)別，希望對(duì)大家有所幫助！
一、Key是什么
開始之前，我們先還原兩個(gè)實(shí)際工作場(chǎng)景
-
當(dāng)我們?cè)谑褂?code>v-for時(shí)，需要給單元加上
key
<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
-
用
+new Date()生成的時(shí)間戳作為key，手動(dòng)強(qiáng)制觸發(fā)重新渲染
<Comp :key="+new Date()" />
那么這背后的邏輯是什么，key的作用又是什么？
一句話來講
key是給每一個(gè)vnode的唯一id，也是diff的一種優(yōu)化策略，可以根據(jù)key，更準(zhǔn)確， 更快的找到對(duì)應(yīng)的vnode節(jié)點(diǎn)。（學(xué)習(xí)視頻分享：vue視頻教程）
場(chǎng)景背后的邏輯
當(dāng)我們?cè)谑褂?code>v-for時(shí)，需要給單元加上key
- 如果不用key，Vue會(huì)采用就地復(fù)地原則：最小化element的移動(dòng)，并且會(huì)嘗試盡最大程度在同適當(dāng)?shù)牡胤綄?duì)相同類型的element，做patch或者reuse。
- 如果使用了key，Vue會(huì)根據(jù)keys的順序記錄element，曾經(jīng)擁有了key的element如果不再出現(xiàn)的話，會(huì)被直接remove或者destoryed
用+new Date()生成的時(shí)間戳作為key，手動(dòng)強(qiáng)制觸發(fā)重新渲染
- 當(dāng)擁有新值的rerender作為key時(shí)，擁有了新key的Comp出現(xiàn)了，那么舊key Comp會(huì)被移除，新key Comp觸發(fā)渲染
二、設(shè)置key與不設(shè)置key區(qū)別
舉個(gè)例子：
創(chuàng)建一個(gè)實(shí)例，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)建實(shí)例 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會(huì)進(jìn)行這樣的操作：
分析下整體流程：
- 比較A，A，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作 - 比較B，B，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作 - 比較C，F(xiàn)，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，數(shù)據(jù)不同，發(fā)生dom操作 - 比較D，C，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，數(shù)據(jù)不同，發(fā)生dom操作 - 比較E，D，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，數(shù)據(jù)不同，發(fā)生dom操作 - 循環(huán)結(jié)束，將E插入到
DOM中
一共發(fā)生了3次更新，1次插入操作
在使用key的情況：vue會(huì)進(jìn)行這樣的操作：
- 比較A，A，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作 - 比較B，B，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作 - 比較C，F(xiàn)，不相同類型的節(jié)點(diǎn)
- 比較E、E，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作
- 比較E、E，相同類型的節(jié)點(diǎn)，進(jìn)行
- 比較D、D，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作 - 比較C、C，相同類型的節(jié)點(diǎn)，進(jìn)行
patch，但數(shù)據(jù)相同，不發(fā)生dom操作 - 循環(huán)結(jié)束，將F插入到C之前
一共發(fā)生了0次更新，1次插入操作
通過上面兩個(gè)小例子，可見設(shè)置key能夠大大減少對(duì)頁(yè)面的DOM操作，提高了diff效率
設(shè)置key值一定能提高diff效率嗎？
其實(shí)不然，文檔中也明確表示
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素
這個(gè)默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出
建議盡可能在使用 v-for 時(shí)提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升
三、原理分析
源碼位置：core/vdom/patch.js
里判斷是否為同一個(gè)key，首先判斷的是key值是否相等如果沒有設(shè)置key，那么key為undefined，這時(shí)候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方法中會(huì)對(duì)新舊vnode進(jìn)行diff，然后將比對(duì)出的結(jié)果用來更新真實(shí)的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ǔ)視頻）
