v-for中key值的作用

简介: v-for中key值的作用

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;

1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

2.key主要用来做dom diff算法用的,diff算法是同级比较,比较当前标签上的key还有它当前的标签名,如果key和标签名都一样时只是做了一个移动的操作,不会重新创建元素和删除元素。

3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变,Vue不是移动Dom元素来匹配数据项的改变,而是简单复用原来位置的每个元素。如果删除第一个元素,在进行比较时发现标签一样值不一样时,就会复用之前的位置,将新值直接放到该位置,以此类推,最后多出一个就会把最后一个删除掉。

4.尽量不要使用索引值index作key值,一定要用唯一标识的值,如id等。因为若用数组索引index为key,当向数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM的key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据,用索引号index做key值是没有问题的。

5.标签名一样,key一样这时候就会就地复用,如果标签名不一样,key一样不会复用。

相关文章
|
7月前
|
小程序
小程序for循环中key值的作用?
小程序for循环中key值的作用?
|
6月前
|
JavaScript
.V-for中 key 值的作用,如何选择key
.V-for中 key 值的作用,如何选择key
144 4
|
5月前
|
前端开发
let array = [{id:‘001‘,name:‘小新‘,age:5},{ id:‘002‘,name:‘小葵‘]这样数据如何遍历,拿到其中一个值,数组中装对象如何获取其中一个固定的值
let array = [{id:‘001‘,name:‘小新‘,age:5},{ id:‘002‘,name:‘小葵‘]这样数据如何遍历,拿到其中一个值,数组中装对象如何获取其中一个固定的值
|
7月前
|
文字识别
印刷文字识别产品使用合集之设置了key值,那么在响应的参数data中,key值对应的信息会按照设置的顺序从0开始一一对应嘛
印刷文字识别(Optical Character Recognition, OCR)技术能够将图片、扫描文档或 PDF 中的印刷文字转化为可编辑和可搜索的数据。这项技术广泛应用于多个领域,以提高工作效率、促进信息数字化。以下是一些印刷文字识别产品使用的典型场景合集。
|
6月前
|
JavaScript
V-for中 key 值的作用,如何选择key
V-for中 key 值的作用,如何选择key
28 0
|
7月前
|
JavaScript 索引
V-for中key值的作用,如何选择key
V-for中key值的作用,如何选择key
46 0
|
7月前
|
JavaScript 算法
v-for中key的原理和作用
为什么在使用v-for循环渲染列表时,应始终为每个列表项提供一个唯一的key属性? `使用v-for时加上key属性是为了提高渲染列表时的性能和效率。`
|
小程序 JavaScript 索引
小程序v-for与key值使用
小程序v-for与key值使用
187 0
|
前端开发
根据key值过滤形成新得数组
根据key值过滤形成新得数组
76 0