v-for循环为什么要绑定key值

简介: v-for循环为什么要绑定key值

1.vue在渲染的时候,会先把新Dom和旧dom进行对比,如果结构一致,则vue会复用旧的dom这个时候可能造成数据渲染异常


2.使用key可以给dom添加一个标识符让vue强制更新dom比如有一个列表有li1到li4我们需要在中间插入一个li3,li1和li2不会从新渲染而li3 li4 li5都会从新渲染,因为在不使用key或者列表index作为key的时候每个元素对应的位置关系都是index直接导致我们插入的原数以及到后面的全部元素对应的位置都发生了变更,所以全部都会执行更新操作,而这使用唯一key的情况下,每个元素对应的位置关系就是key。


总结:Key的作用主要是为了更高效的更新虚拟dom,


还有他可以非常精确,会找到相同节点,因此patch过程会非常高效view在patch过程中会判断两个节点是不是相同节点时key是一个必要条件,比如渲染列表时如果不写key你也在比较的时候就可能会导致频繁更新元素,使整个过程比较低效,影响性能应该避免使用数组下标作为key因为key值不是唯一的话,可能会导致上面图中表示的bug使vue无法区分它,它还有比如在使用相同标签元素过度切换的时候就会导致只替换其内部属性而不会触发过渡效果,从源码里可以知道没有判断两个节点是否相同,是主要判断两者的元素类型和key等,如果不设置key就可能永远认为这两个是相同节点,只能去做更新操作,就造成大量不必要的dom更新操作,明显是不可取的,为什么不建议index索引作为key使用index作为key和没写基本上没区别,因为不管数组的顺序怎么颠倒index都是012这样排列,导致vue会复印错误的就此节点做很多额外的工作


目录
相关文章
|
7月前
|
小程序
小程序for循环中key值的作用?
小程序for循环中key值的作用?
|
7月前
|
JavaScript 前端开发 索引
如何判断一个值是否在数组内?
如何判断一个值是否在数组内?
|
5月前
|
前端开发
let array = [{id:‘001‘,name:‘小新‘,age:5},{ id:‘002‘,name:‘小葵‘]这样数据如何遍历,拿到其中一个值,数组中装对象如何获取其中一个固定的值
let array = [{id:‘001‘,name:‘小新‘,age:5},{ id:‘002‘,name:‘小葵‘]这样数据如何遍历,拿到其中一个值,数组中装对象如何获取其中一个固定的值
|
JavaScript 算法 索引
v-for中key值的作用
v-for中key值的作用
|
7月前
|
前端开发 数据库
两个map中的数据,按照相同键,将所对应的值相加方法
两个map中的数据,按照相同键,将所对应的值相加方法
|
7月前
判断两个不重复的list集合是否相等 只比较元素值 不比较顺序
判断两个不重复的list集合是否相等 只比较元素值 不比较顺序
73 0
删除数组中重复出现的值
删除数组中重复出现的值
79 0
|
小程序 JavaScript 索引
小程序v-for与key值使用
小程序v-for与key值使用
189 0
|
前端开发
根据key值过滤形成新得数组
根据key值过滤形成新得数组
77 0
|
存储 Java
从数组当做map的key引发的思考
从数组当做map的key引发的思考
161 0