溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“vue中設置key與不設置有什么區別”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中設置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節點。
當我們在使用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觸發渲染
舉個例子：
創建一個實例，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操作
比較D、D，相同類型的節點，進行patch，但數據相同，不發生dom操作
比較C、C，相同類型的節點，進行patch，但數據相同，不發生dom操作
循環結束，將F插入到C之前
一共發生了0次更新，1次插入操作
通過上面兩個小例子，可見設置key能夠大大減少對頁面的DOM操作，提高了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]
}
}
...
}讀到這里，這篇“vue中設置key與不設置有什么區別”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
