在Vue中给v-for提供了一个属性key，在每次写v-for的时候都需要给元素加上一个key属性，这个key属性必须是唯一的标识，并且key的值不能是可变的。
首先看一看Vue文档里的说法：

在用v-for更新已经渲染的元素列表时，会使用就地复用的策略，这就是说列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。
总之v-for是通过key来提升渲染效率的。

1.示例

这个场景在开发中经常碰到，如果不加key，Vue会报错，因此我使用了index作为key，此时Vue会根据初始数据生成虚拟DOM

然后再将虚拟DOM转成真实DOM渲染到页面并在输入框内输入提示信息

下面再举两个例子来看数据更新后的情况：

1.1 在最后一条数据后再加一条数据

此时前三条数据直接复用了之前的，只是新渲染了最后的数据，此时用index作为key值，没有任何问题。

1.2 在最前边插入一条数据

根据新数据会生成新的虚拟DOM并用diff算法和初始虚拟DOM进行对比
比对相同key值的虚拟DOM，如果节点相同直接复用，不同再重新渲染，最终生成真实DOM

可以发现数据不能复用，所有数据都需要重新渲染，并且出现了意想不到的问题。

2.总结

1、最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，只是简单的展示数据，用index也是可以的。