v-for为什么要设置key值及为什么不建议使用index作为key

为什么要设置key值

• 提高diff算法的效率,可以更加快捷找出变化和新增的元素，更高效的更新虚拟DOM（key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。）

为什么不建议使用index作为key

• 以下面代码为例：

<ul>
  <li v-for="(item, index) in lists">
    <input type="checkbox" :value="item.text"/>
    {{item.text}}
    <button @click="remove(index)"></button>
  </li>
</ul>
 
 
<script>
  var vm = new Vue({
  el: '#app',
  data: {
    lists: [
      { id: 1, text: '张' },
      { id: 2, text: '吕' },
      { id: 3, text: '王' }
    ]
  },
  methods: {
    remove(index) {
      //注意这里是shift
      this.lists.splice(index,1)
    }
  }
 })
</script>

我们删除了第一个,但原来的第二项却自动被“选中上”了。其实这里并不是被选中了,而是因为新旧虚拟dom的节点都一样,就自动复用了。然后对比里面的文本,发现不一样,就仅仅更新文本而已。 发现都有key为0的节点,直接复用,发现里面的文本不一样,直接修改,其他的都不变，所以这里并不是被选中了,而是保留了旧节点的状态。