4. v-for key的作用与原理

引入问题：key 值为 index 或者 item.id 的区别 ？

    

      

        

          {{ item.name }}
          
        
      
      点击在数组首部添加一个元素
    
    

上述我们会发现输入框的内容窜行了，如果把 :key="item.id" 就能解决这个问题。

diff 算法对比的是虚拟DOM，而不是真实DOM。


如果是 id 作为 key 值

提示：如果在使用 v-for 遍历列表的时候，没有写 key 的值，那么默认是使用了 index 作为key 的值。
总结：使用 index 作为 key 可能会引发的问题：

1. 若对数据进行：逆序添加，逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新，界面没问题，但是效率低。
2. 如果结构中还包括输入类的DOM，会产生错误的DOM更新，界面会出现问题