v-for为什么要加key(2019-12-19)

举个例子：

没有key

 <div id="app">
    <div>
      <input type="text" v-model="name">
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, i) in list">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        newId: 3,
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '吕不韦' },
          { id: 3, name: '嬴政' }
        ]
      },
      methods: {
        add() {
         //注意这里是unshift
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      }
    });
  </script>
  </div>

当选中吕不为时，添加楠楠后选中的确是李斯，并不是我们想要的结果，我们想要的是当添加楠楠后，一种选中的是吕不为

3I0U9NL2I2LJVV}TOR20EYL.png

添加元素之后，本来选中的是吕不韦，结果变成了李斯

因为元素是先加载到虚拟DOM中，然后再渲染到DOM，这个渲染的过程中要用到Diff算法
，首先对比两者有什么不同，然后把不同的元素添加到DOM中，按正常思路如果插入了一个元素应该是直接在插入的位置新建一个元素，但是diff算法默认是把添加元素的位置之后的元素全部向下移一格，而不是直接插入，所以元素的对应关系就出现了问题。具体思路：https://www.bilibili.com/video/av59594689?p=37