vue中v-for为什么必须要设置 :key？

首先，可以通过以下方式设置key值，


id是唯一识别的，使用id属性作为key的值。

也有这样设置key值的，

v-for="(item, index) in list" :key="index"

这样设置的key值为每一项的列表序号，0，1，2…
这两种设置方式一般来说都可以，但是某些情况会出现差别

先说一下，设置key值是为了提高动态加载的效率。

假设有这样一个场景，
有一个按钮可以添加图片，动态添加到pics参数中，
当我们点击按钮，pics添加了一个字典值，我们的图片展示也会添加一张图片。
一般我们都是添加到列表尾部，这样两种key的设置方法不会有区别，但如果添加到列表的中间，就会出现效率上的差别。
使用列表序号的话，如果插在中间，插入位置前面的key不用改变，无需重新渲染，但是插入位置后面的key都需要改变，需要重新渲染。
使用上面的id的话，我们只需要插入即可，其他的key值都不会改变，无需重新渲染。

设置key和不设置key

vue为了提高虚拟DOM的效率，规定需要设置key值。