补充 v-for当中的 key

首先很感谢细心的同学发现我在给大家发v-for案例的时候没有绑定key属性

那在这里我再来补充一下绑定key属性在v-for的重要性

没有绑定key属性的截图给大家看，大家就知道怎么回事了

现在到页面当中去

选中其中一项，再添加（去页面当中选中羽毛球，然后输入内容添加，我们会发现选中的羽毛球发生可改变）

现在再把key属性加上

在Vue中，v-for指令用于循环渲染数组或对象的数据，而key属性则是用来帮助Vue识别每个节点的唯一性，从而提高渲染性能的。

当Vue更新DOM时，它会根据key值来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要新增。

如果没有key值，Vue会默认使用节点的索引作为key值，但这样会导致一些问题，

因此，我们应该尽可能地为v-for循环中的每个节点设置唯一的key值，（建议使用id，而不是index）以提高Vue的渲染性能。

总结

• 简单通俗地讲，没有key时，状态默认绑定的是位置，有key时，状态根据key的属性值绑定到了响应的数组元素。

• key是为了更高效的更新虚拟DOM

• 推荐使用数组内的字段（保证唯一性）作为key的唯一标识，不建议直接使用index