Vue模板中使用v-for指令时不建议将index作为:key属性。今天我在看项目代码时，发现有多年开发经验的前端老鸟也犯这样的低级错误。
今天我们就从其原理上说明为什么不建议将 index 作为 v-for 的 key，除非你能确定该 v-for 遍历的数组长度始终不会发生变化，不过在这个需求多变的时代谁能保证产品不会想一出是一出呢？
当我们在模板里使用了响应式变量时，当变化值发生变化时，其对应的dom对象也会触发更新，这背后就是vue内部的 vdom diff 算法过程
如下模板代码
<ul>
<li>a</li>
<li>b</li>
</ul>
生成的 VDOM 大致如下
{
tag: 'ul',
children: [
{ tag: 'li', children: [ { vnode: { text: 'a' }}] },
{ tag: 'li', children: [ { vnode: { text: 'b' }}] },
]
}
之后把两个li顺序改变下
{
tag: 'ul',
children: [
{ tag: 'li', children: [ { vnode: { text: 'b' }}] },
{ tag: 'li', children: [ { vnode: { text: 'a' }}] },
]
}
接下来就是diff算法发挥作用了，首先就是响应式 更新之后，会调用渲染 Watcher 的回调函数vm._update(vm._render())去驱动视图更新，vm._render() 其实生成的就是 vnode，而 vm._update 就会带着新的 vnode 去走触发 patch 过程。
- 其中首先判断的就是节点是否相同：
- 不相同：就会直接删除旧的vnode，渲染新的vnode；
- 相同：就要让节点尽可能多的复用；
但是节点相同就要判断很多情况，如：vnode是文字的话就直接替换掉文字；vnode不是的话就要对children进行比较（ul中li做比较）；如果有新vnode，没有旧的vnode，就需要增加节点；如果没有新vnode，有旧vnode，那么就要删除节点；如果新旧节点都有，就需要diff算法了；
// 旧首节点
let oldStartIdx = 0
// 新首节点
let newStartIdx = 0
// 旧尾节点
let oldEndIdx = oldCh.length - 1
// 新尾节点
let newEndIdx = newCh.length - 1
这是用变量把新节点首尾，旧节点的首尾表示，在while中，不断的对新旧节点进行比较，直到指针收缩到没有节点可以比较。
其中有一个函数 sameVnode，
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)
)
)
)
}
它是用来判断节点是否可用的关键函数，可以看到，判断是否是 sameVnode，传递给节点的 key 是关键。
然后我们接着进入 diff 过程，每一轮都是同样的对比，其中某一项命中了，就递归的进入 patchVnode 针对单个 vnode 进行的过程（如果这个 vnode 又有 children，那么还会来到这个 diff children 的过程 ）：
- 旧首节点和新首节点用sameNode 对比；
- 旧尾节点和新尾节点用sameNode 对比；
- 旧首节点和新尾节点用sameNode 对比；
- 旧尾节点和新首节点用sameNode 对比；
- 如果以上逻辑都匹配不到，再把所有旧子节点的 key 做一个映射到旧节点下标的 key -> index 表，然后用新 vnode 的 key 去找出在旧节点中可以复用的位置。
然后不停的把匹配到的指针向内部收缩，直到新旧节点有一端的指针相遇（说明这个端的节点都被patch过了）。
在指针相遇以后，还有两种比较特殊的情况：
有新节点需要加入。 如果更新完以后，oldStartIdx > oldEndIdx，说明旧节点都被 patch 完了，但是有可能还有新的节点没有被处理到。接着会去判断是否要新增子节点。
有旧节点需要删除。 如果新节点先patch完了，那么此时会走 newStartIdx > newEndIdx 的逻辑，那么就会去删除多余的旧子节点。
我们可以使用 Vue SFC Playground 来演示这个过程
<script setup>
import { ref } from 'vue'
const list= ref(['111', '222', '333', '444'])
const handleAddd = () => {
list.value.unshift('test' + Math.random().toString(16).slice(2))
}
const handleRemove = index => {
list.value.splice(index, 1)
}
</script>
<template>
<ul>
<li v-for="(item, index) in list" :key="index">
item: {{item}}
<button @click="handleRemove(index)">
删除
</button>
</li>
</ul>
<button @click="handleAddd">
新增
</button>
</template>
如上代码所示，我们使用index作为key时，此时我们在数组 list 的头部添加一个元素，会导致其他li进行不必要的更新。
因list子项的key发生了变化导致更新
删除也是如此，由于li的key发生变化，会导致不必要的更新
发生变化的子项key会导致dom更新
此时我们将 key 绑定为 item 时，将只更新需要更新的dom
应确保绑定的
key在list中能唯一，不与其他项相同
key绑定为唯一确定该项的值时将减少不必要的dom更新
网友评论