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 = ''
        }