Vue中v-for为什么要加key

我们先来举个栗子🌰：

如果我们不加key：

<div id="app">
  <div>
    <input type="text" v-model="name">
    <button @click="add">添加</button>
  </div>
  <ul>
    <li v-for=" item in list">
      <input type="checkbox"> {{item.name}}
    </li>
  </ul>
  <script src="./js/vue.js"></script>
  <script>
    // 创建 Vue 实例，
    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>

当选中花心超人时，添加大大怪将军后选中的确是开心超人，并不是我们想要的结果，我们想要的是当添加大大怪将军后，应该选中的还是花心超人。

当我们加上key：

<div id="app">
  <div>
    <input type="text" v-model="name">
    <button @click="add">添加</button>
  </div>
  <ul>
    <li v-for=" item in list" :key="item.id">
      <input type="checkbox"> {{item.name}}
    </li>
  </ul>
  <script src="./js/vue.js"></script>
  <script>
    // 创建 Vue 实例，
    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>