【揭秘Vue核心】为什么不建议在 v-for 指令中使用 index 作为 key，让你秒懂！

<div v-for="(item, index) in items" :key="index">
  <!-- 内容 -->
</div>

const vnode = {
  type: 'div',
  props: {
    id: 'hello'
  },
  children: [
    /* 更多 vnode */
  ]
}

function sameVnode(a, b) {
  return (
    a.key === b.key &&   // 如果key不相同，会被认定为不是相同的节点
    a.asyncFactory === b.asyncFactory &&
    ((a.tag === b.tag &&
      a.isComment === b.isComment &&
      isDef(a.data) === isDef(b.data) &&
      sameInputType(a, b)) ||
      (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error)))
  )
}

function patch(oldVnode, vnode, hydrating, removeOnly) {  
  if (sameVnode(oldVnode, vnode)) {
    // patch existing root node
    patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
  } else {
    // replacing existing element
    const oldElm = oldVnode.elm		// 当前oldVnode对应的真实元素节点
    const parentElm = nodeOps.parentNode(oldElm) // / 父元素
    createElm(vnode) 	// 创建新元素
    insert(parentElm, vnode.elm, refElm) // 在createElm中实现
    if (isDef(parentElm)) {
      removeVnodes([oldVnode], 0, 0)  // 移除以前的旧元素节点
    }
  }
  return vnode.elm
}

function patchVnode(oldVnode, vnode) {
  if (oldVnode === vnode) {
    return	// 同一个对象，直接return
  }
  const elm = (vnode.elm = oldVnode.elm)
  let i
  const data = vnode.data
  const oldCh = oldVnode.children
  const ch = vnode.children
  if (isUndef(vnode.text)) {	
    if (isDef(oldCh) && isDef(ch)) {
      if (oldCh !== ch) // oldVnode 和 vnode children 都有子节点
        updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) { 
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) { 
      removeVnodes(oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    nodeOps.setTextContent(elm, vnode.text)
  }
}

/* newStartIdx、newEndIdx：new vnode 第一个和最后一个节点index值
 * oldStartIdx、oldEndIdx：old vnode 第一个和最后一个节点index值 */
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
   if (sameVnode(oldStartVnode, newStartVnode)) {		 // 下述「第1步」从头开始patch
     patchVnode(...)
     oldStartVnode = oldCh[++oldStartIdx]
     newStartVnode = newCh[++newStartIdx]
   } else if (sameVnode(oldEndVnode, newEndVnode)) { // 下述「第2步」从尾开始patch
     patchVnode(...)
     oldEndVnode = oldCh[--oldEndIdx]
     newEndVnode = newCh[--newEndIdx]
   } else if (sameVnode(oldStartVnode, newEndVnode)) { // 下述「第3步」
     // Vnode moved right
     patchVnode(...)
     canMove && nodeOps.insertBefore(...)
     oldStartVnode = oldCh[++oldStartIdx]
     newEndVnode = newCh[--newEndIdx]
   } else if (sameVnode(oldEndVnode, newStartVnode)) { // 下述「第4步」
     // Vnode moved left
     patchVnode(...)
     canMove && nodeOps.insertBefore(...)
     oldEndVnode = oldCh[--oldEndIdx]
     newStartVnode = newCh[++newStartIdx]
   } else {
     // 这一部分比较重要，截图源码说明
   }
}

if (oldStartIdx > oldEndIdx) {
  refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
  addVnodes(...)
} else if (newStartIdx > newEndIdx) {
	removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}

<script setup>
import { ref } from 'vue'

const list = ref([
  { name: '项目1' },
  { name: '项目2'},
  { name: '项目3'}
])
function del(index) {
  list = list.value.splice(index, 1)
}
</script>

<template>
 <div>
		<div v-for="(item,index) in list" :key="index">
			<span>{{item.name}}</span>
      <input />
			<button @click="del(index)">删除</button>
		</div>
	</div>
</template>