理解 Vue 的 key 和 diff 算法以上两种情况唯一的区别就是，用 index 做为 key，删除第一项之后，第

问题

之前在开发中遇到过类似如下的问题：

<div id="app">
  <ul>
    <li v-for="(item,index) in list" :key="index">
      <input type="checkbox">
      子项{{item}}
      <button @click="deleteItem(index)">删除</button>
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    list: [1, 2, 3]
  },
  methods:{
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
})

勾选 子项1中的 checkbox，点击 子项1 的删除按钮后，子项2 居然默认选中了？

记得之前好像听到同事有说过用 index 当 key 会出问题，通过询问得知将 key 设置为唯一的值即可解决问题，然后尝试了下将 key 设置为 item ：

<div id="app">
  <ul>
    <li v-for="(item,index) in list" :key="item">
      <input type="checkbox">
      子项{{item}}
      <button @click="deleteItem(index)">删除</button>
    </li>
  </ul>
</div>

以上两种情况唯一的区别就是，用 index 做为 key，删除第一项之后，第二项和第三项的 key 发生了变化，而用 item 作为 key，key 始终不变。看来问题是出现在了 key 对 Vue 比对 虚拟dom 时有影响。

虚拟 dom 与 diff 算法

虚拟 dom 是对 dom 的抽象，其本质是一个JavaScript对象。当数据被修改时，vue内部会先通过虚拟 dom 的比对再决定如何更新真实的dom，这可以减少很多dom操作。

vue在修改数据时，消息管理器Dep会发出通知，然后就会通过 diff 算法比对新旧的虚拟dom，diff算法的流程大致如下：

可以在 Vue源码中查看具体实现。

这里主要看下 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)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

当两个 Vnode 的 key tag 都相同，Vnode 都含有 data 或者都不含有 data 时会进行 patchVnode的操作，这里的 key 至关重要，结合 updateChildren 就可以找到我们开始那个问题的原因。

如果两个 vnode 都没有绑定 key 的话这里的 a.key === b.key 也是满足的，都是 undefined

updateChildren 过程

代码可查看 Vue源码 patch.js 中 updateChildren 部分。

这里把代码中的变量做个简称：

oldStartVnode：旧头
oldEndVnode：旧尾
newStartVnode：新头
oldEndVnode：新尾

先 头尾交叉对比，如果是 samenode，那么就把 新节点 patch 到 旧节点
头尾交叉对比 完了之后，如果还没有匹配到的话，就会利用新头的 key 对比

新头分为 有 key 和 无 key 两种情况，有 key 的话就去 旧节点 生成的 map 对象上匹配：

当没有对应的 key ，那么创建新的节点
如果有对应的 key 并且是相同的节点，把**新节点 patch**到 旧节点
如果有对应的 key 但是不是相同的节点，则创建新节点，只要创建了新节点 新头指针后移，再次进入循环

如果新头没 key 的话就用 旧节点数组 循环对比新头

调试 Vue 源码

我们查看源码了解了 diff 算法，要验证最开始的那个问题就需要调试源码。

调试源码可以让我们清晰看到 Vue 是如何运行 diff 算法的，我们需要先做好如下准备工作：

先 clone Vue项目，然后执行 npm install 安装依赖。
修改 package.json 中的 script 下的 dev，在 TARGET:web-full-dev 后添加 --sourcemap
执行 npm run dev，这时会在 dist 文件夹下生成一个 vue.js.map 的文件
在页面中引用 vue.js 便可以在 chrome 的 sources 上看到 vue 中各个目录下的文件了