在日常項目中，我們通常不會注意到這一個點，因爲具體在體現上並沒有什麼差別，但在性能層面確實不同的，也是需要我們去注意的一點，如果在小項目的情況下，可能不會存在太大的差別，但在大型的項目中，就往往會影響，比如頁面加載太慢，導致的用戶體驗差。主要的原因還是源於 在循環中我們沒有加 key 這個標識，導致 Dom 操作多次產生的。
接下來，我就帶大家來體驗一下， 在循環中加 key 與 不 加 key的區別？
有興趣的小夥伴，可以根據以下的步驟操作起來，只有自己去上手操作，才能對其掌握，這樣也會對源碼有深刻的理解。話不多說，我們立馬進入～～～
一、 預備工作
1. Vue2.6 源碼的 clone
2. 瀏覽器，我用的是 google
3. 瀏覽器內斷點操作
二、新建 html
在 Vue2.6 源碼目錄下，找到 examples 文件夾，新建 /06.key/index.html , 以下爲 html 內部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="add">添加</button>
<button @click="delect">刪除</button>
<ul>
<li v-for="item in NumberGroup">{{item}}</li>
</ul>
</div>
<script src="../../dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
NumberGroup: ['a', 'b', 'c']
},
methods: {
add() {
this.NumberGroup.splice(1, 0, 'd')
// this.arr = ['a', 'd', 'b', 'c']
},
delect() {
this.NumberGroup.splice(0, 1)
// this.arr = ['b', 'c']
}
}
})
</script>
</body>
</html>
三、斷點
打開 google 瀏覽器，F12 找到 sources, 根據下面圖片，找到 虛擬 Dom 對比的文件，並進行斷點
四、源碼分析
/**
*
* @param parentElm 父級 Element
* @param oldCh 老 Vnode-list-虛擬Dom
* @param newCh 新 Vnode-list-虛擬Dom
* @param insertedVnodeQueue
* @param removeOnly
*/
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
// 老的開始 Index
let oldStartIdx = 0
// 新的開始 Index
let newStartIdx = 0
// 老的結束 Index
let oldEndIdx = oldCh.length - 1
// 老的開始 Vnode
let oldStartVnode = oldCh[0]
// 老的結束 Vnode
let oldEndVnode = oldCh[oldEndIdx]
// 新的結束 Index
let newEndIdx = newCh.length - 1
// 新的開始 Vnode
let newStartVnode = newCh[0]
// 新的結束 Vnode
let newEndVnode = newCh[newEndIdx]
let oldKeyToIdx, idxInOld, vnodeToMove, refElm
// removeOnly is a special flag used only by <transition-group>
// to ensure removed elements stay in correct relative positions
// during leaving transitions
const canMove = !removeOnly
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(newCh)
}
/**
* 老的開始 Index <= 舊的結束 Index && 新的開始 Index <= 新的結束 Index
**/
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 老的開始 Index 是否存在
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
// 老的結束 Index 是否存在
} else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
// 老的開始 Vnode 與 新的開始 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
// 老的結束 Vnode 與 新的結束 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
// 老的開始 Vnode 與 新的結束 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
// 老的結束 Vnode 與 新的開始 Vnode 是否相同，依據是 key 是否相同
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} 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]
}
}
if (oldStartIdx > oldEndIdx) {
// 老的開始 Index > 老的結束 Index 【 新增 Vnode 】
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {
// 新的開始 Index > 新的結束 Index 【 刪除 Vnode 】
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}
}
四、調試---不加 key
操作：點擊 添加 按鈕，進入斷點