V-for指令为什么要加key

为什么使用v-for要添加唯一的key?

一:有key和没key的对比

没有key的时候

  <div id="app">
    <div>
      <input type="text" v-model="fruits">
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, i) in list">
        <input type="checkbox"> {{item.fruits}}
      </li>
    </ul>
  </div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: '',
        New: 3,
        list: [
          { id: 1, fruits: '苹果' },
          { id: 2, fruits: '桃子' },
          { id: 3, fruits: '香蕉' }
        ]
      },
      methods: {
        add() {
          this.list.unshift({ id: ++this.New, fruits: this.fruits }),
          this.fruits = ''
        }
      }
    });
  </script>

当你选中桃子的选项，再向文本框中添加信息，这时文本框中的信息填写到了单选框列表的最上面，这时单选框中
本来选择桃子的变成选择苹果，可是有时候我们的选择是像让它还是选中桃子？那么我们应该什么做呢？

有key的时候

  <div id="app">
    <div>
      <input type="text" v-model="fruits">
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, i) in list" :key="item.id">
        <input type="checkbox"> {{item.fruits}}
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: '',
        New: 3,
        list: [
          { id: 1, fruits: '苹果' },
          { id: 2, fruits: '桃子' },
          { id: 3, fruits: '香蕉' }
        ]
      },
      methods: {
        add() {
          this.list.unshift({ id: ++this.New, fruits: this.fruits })
          this.fruits = ''
        }
      }
    });

这次选中的就还是桃子

你可能这个时候会问,为什么加了一个key就有这样的改变呢?
首先我们要了解diff算法

一:对比

diff算法的处理方法,对操作前后的dom树同一层的节点进行对比,一层一层对比,当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则,比如下面这张图

二:假如我们想向B和C中插入F，就像这样

我们也许想让节点是下面这样插入的,就是只是dom上的交换(就是向a2和a3之间之间插入a5)，实际上数组还是没有改变

但实际上当没有key的时候是这样的

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM