v-for中key的作用

505 阅读2分钟
Vue中为v-for提供了一个属性,key。在写v-for的时候,都需要给元素加上一个key属性,这个key属性必须是唯一的标识,并且key赋值的内容不能是可变的。

对于用V-for渲染的列表数据来说,数据量可能一般比较庞大,而且我们经常还要对这个数据进行一些增删改操作。
v-for默认使用就地复用策略,列表数据修改的时候,会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。

key是特殊的attribute主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。

如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地复用相同类型元素的算法。
使用key时,他会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
key的作用主要是为了高效的更新虚拟DOM,另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分他们,否则vue只会替换其内部属性而不会触发过渡效果。
  • v-for就地更新:如果循环中添加或者删除数据,数据的更新
  • Vue默认更新:类似于按照index对比的依次对比,如果数组中间添加一条数据,添加的数据得到的是之前数据的索引,vue默认会把原来的值赋值给新添加的数据,因为索引一样。之后数据因为索引发生改变,所以全都会改变
  • key的作用:更改vue默认更新对比方式。:key="按什么之查找对比",id是不会重复的,一般用id查找(唯一的标识),这样如果在中间新添加一条数据,就会按照id去对比,所以只会在中间添加了一条数据,后面的值因为id还是之前的id所以也不会更改