[vue] 为什么在v-for中的key不推荐使用随机数或者index呢?那要怎么使用才比较好呢?

haizhilin2013
2020-04-12 05:43:23 星期日
vue
                    
                        
为什么在v-for中的key不推荐使用随机数或者index呢?那要怎么使用才比较好呢?
Comments per page
< Page 1 / 1 >
rxluck 2020-07-21 04:17:09

因为在插入数据或者删除数据的时候,会导致后面的数据的key绑定的index变化,进而导致从新渲染,效率会降低

canvascat 2020-09-16 07:58:24

因为在插入数据或者删除数据的时候,会导致后面的数据的key绑定的index变化,进而导致从新渲染,效率会降低

派发更新:vue/src/core/vdom/patch.js
updateChildren 方法中使用 sameVnode 需要比较key,

laozhan0000 2020-10-13 08:15:01

增删时避免重新渲染

XAihan 2020-12-16 09:48:01

当数据进行更改的时候,会通过key来判断虚拟dom树是否进行了更改。如果发现了相同的dom-key就可以直接复用。减少了渲染的性能损耗。

crush2020 2021-01-21 02:44:27

我来补充一下,这个key应该绑定你v-for循环数据中的唯一值,这样就会大大减少渲染次数,数据更新时就不用一一替换,从而使用插入新数据的算法。

sc950828 2022-09-24 13:07:53

数据只做展示,用index是没问题的。如果涉及到删除,添加,就不行了,因为index不再唯一了。

WangLiqing0713 2023-07-11 15:05:47

key尽量选择唯一不重复的id,在传数据的时候,id: +new Data() 使用时间戳
随机数或索引可能会出现重复的情况

Comments per page
< Page 1 / 1 >

学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

【关注官方公众号】 每天4:30-5:00推送
【公众号推荐】 一起折腾前端算法
【微信学习群】 备注3+1