VUE中Key的原理

一、问题

<div id="root">
  <h2>人员列表（遍历数组）</h2>
  <button @click.once="addPerson">添加一个老刘</button>
  <ul>
    <li v-for="(p, index) of persons" :key="index">
      {{p.name}}-{{p.age}}
      <input type="text">
    </li>
  </ul>
</div>

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      persons: [
        { id: '001', name: '张三', age: 18 },
        { id: '002', name: '李四', age: 19 },
        { id: '003', name: '王五', age: 20 }
      ]
    },
    methods: {
      addPerson() {
        const p = {
          id: '004',
          name: '老刘',
          age: 21
        };

        this.persons.unshift(p);
      }
    }
  })
</script>

当点击按钮时，输入框数据发生了错位：

二、原理

通过虚拟DOM的比较（Diff算法），如果key值相同并且虚拟DOM相同（input），则会复用，所以会产生错位

注意：使用index作为key并不总是出现问题，只有当数据发生顺序性破坏的时候，才会出现，比如将老刘插入数组的第一位，如果放在尾部则不会出现问题

如果使用ID作为key值则不会发生错乱，并且效率更高（因为复用了DOM）

如果v-for不写key，则使用index作为key。

三、总结