Vue循环创建列表为什么需要key

1.vue在循环创建列表的时候需要添加key

let arr =[
{id:0,name:'a'},
{id:1,name:'b'},
{id:2,name:'c'}
];
<li v-for="value in arr" :key="value.id">{{value.name}}</li>

2.为什么需要添加key？

1.为了性能优化 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，
  比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，
  但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。 
  
2.key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，
  那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了