vue中diff v-for中key为什么不能用index表示?

                首先,vue中v-for中的key，为什么不能使用index，而是多使用其id或者其他数据中的唯一值。这其中肯定有一些道理。

就比如：

<ul>
     <li>1</li>
     <li>2</li>
</ul>

他的虚拟DOM就是如下,也就是vnode

{
  tag: 'ul',
  children: [
    { tag: 'li', children: [ { vnode: { text: '1' }}]  },
    { tag: 'li', children: [ { vnode: { text: '2' }}]  },
  ]
}

把更新之后的子节点的顺序改变一下：

{
  tag: 'ul',
  children: [
    { tag: 'li', children: [ { vnode: { text: '2' }}]  },
    { tag: 'li', children: [ { vnode: { text: '1' }}]  },
  ]
}

                接下来就是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过了）。

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

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

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