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

首先,可以通过以下方式设置key值,
在这里插入图片描述
vue中v-for为什么必须要设置 :key?_第1张图片
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中v-for为什么必须要设置 :key?_第2张图片
vue为了提高虚拟DOM的效率,规定需要设置key值。

你可能感兴趣的:(vue.js)