为什么使用v-for后要加key值？

key值主要是提高虚拟DOM的效率

换句话说就是在改变你想要遍历的数组或者对象中的数据时，可以更高效的移动数据；

例如以下所示：

假如已经有数组[a,b,c,d,e]，现在想在B，C之间加入一个新的数据F，那么需要将C,D,E都进行移动位置，把F放进去变成A,B,F,C,D,E，但是我明明插入了一个数据F，但却要移动很多数据，这样效率很低，我们希望仅插入数据，后面的数据不要移动，这是就用到key值，用了key值后，数据移动变成以下这样：

看似d，e也进行了移动，其实不然，其实是将数组中的index和数值进行了关联，因为数组中每个index是唯一的，进行关联后，无论再怎么插入数值，只进行一次变换，效率提高了很多，例如以下：

这是没有key值

这是有key值

现在对比发现只有一条数据变化了,就是id为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的了。

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

借用作者Nanshannan，链接：https://www.jianshu.com/p/4bd5e745ce95 的话来说vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。