Vue模板中使用v-for时，不建议将index作为key

Vue模板中使用v-for指令时不建议将index作为:key属性。今天我在看项目代码时，发现有多年开发经验的前端老鸟也犯这样的低级错误。

今天我们就从其原理上说明为什么不建议将 index 作为 v-for 的 key，除非你能确定该 v-for 遍历的数组长度始终不会发生变化，不过在这个需求多变的时代谁能保证产品不会想一出是一出呢？

当我们在模板里使用了响应式变量时，当变化值发生变化时，其对应的dom对象也会触发更新，这背后就是vue内部的 vdom diff 算法过程

如下模板代码

     
a
     
b

生成的 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 的过程 ）：

1. 旧首节点和新首节点用sameNode 对比；
2. 旧尾节点和新尾节点用sameNode 对比；
3. 旧首节点和新尾节点用sameNode 对比；
4. 旧尾节点和新首节点用sameNode 对比；
5. 如果以上逻辑都匹配不到，再把所有旧子节点的 key 做一个映射到旧节点下标的 key -> index 表，然后用新 vnode 的 key 去找出在旧节点中可以复用的位置。

然后不停的把匹配到的指针向内部收缩，直到新旧节点有一端的指针相遇（说明这个端的节点都被patch过了）。

在指针相遇以后，还有两种比较特殊的情况：

有新节点需要加入。 如果更新完以后，oldStartIdx > oldEndIdx，说明旧节点都被 patch 完了，但是有可能还有新的节点没有被处理到。接着会去判断是否要新增子节点。

有旧节点需要删除。 如果新节点先patch完了，那么此时会走 newStartIdx > newEndIdx 的逻辑，那么就会去删除多余的旧子节点。

我们可以使用 Vue SFC Playground 来演示这个过程

如上代码所示，我们使用index作为key时，此时我们在数组 list 的头部添加一个元素，会导致其他li进行不必要的更新。

因list子项的key发生了变化导致更新

删除也是如此，由于li的key发生变化，会导致不必要的更新

发生变化的子项key会导致dom更新

此时我们将 key 绑定为 item 时，将只更新需要更新的dom

应确保绑定的 key 在 list 中能唯一，不与其他项相同

key绑定为唯一确定该项的值时将减少不必要的dom更新