vue v-for循环中不要使用index作为:key值

最新推荐文章于 2024-03-29 20:43:15 发布
原创 最新推荐文章于 2024-03-29 20:43:15 发布 · 2.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文深入探讨了Vue框架中v-for指令的内部工作机制，强调了在使用下标作为key时可能出现的问题。当数组变更并重新渲染时，使用下标可能导致缓存的映射关系改变，引发未知错误。相比之下，使用唯一值如id能保持映射关系的稳定。因此，建议在v-for循环中避免使用下标作为key，以确保组件正确更新。

内部原理

  • v-for循环时会先在缓存中判断当前的key对应的这一项是否在缓存中:
  • 是的话,会直接取出来,更新数据
  • 否则,重新在缓存中创建基于当前key的数据,然后渲染到页面

使用下标

  • 例:循环一个数组,完成之后,在给数组unshift一个元素,会导致新插入的这个元素直接去匹配缓存中index为0的那一项,而不会重新去创建
  • 即index已经不是第一次渲染的元素了,映射关系已经改变

使用唯一值,如id

  • 例:循环一个数组,完成之后,在给数组unshift一个元素,由于新的id和缓存中的不匹配,他还是会去重新创建
  • 即映射关系不变

结论

在v-for的key中不能使用下标,否则会导致映射关系改变,出现一些未知问题

在uniapp开发微信小程序时，v-for中使用slot的正确姿势
wangxi83的博客
08-13 6942
使用uniapp开发微信小程序，v-for中使用slot的正确方法
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
vue 取出v-for循环中的index值实例
10-16
今天小编就为大家分享一篇vue 取出v-for循环中的index值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
Vue中的v-for中为什么不推荐使用index作为key值
有我更精彩的博客
03-06 3238
在Vue中，我们经常会用到`v-for`指令来遍历数组或对象并渲染列表。而在使用`v-for`指令时，通常会需要给每个遍历的元素指定一个唯一的`key`值，以帮助Vue更高效地更新DOM。
vue for循环_复习之v-for指令（列表渲染指令）
weixin_39684960的博客
11-25 824
引入vue.js <!-- 引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>作用：基于数据多次渲染元素。如何使用v-for指令？1.在v-for中使用数组list：data中的源数据数组，item：data数据list数组的别名，ind...
Vue中控制v-for循环次数的实现方法
10-17
总之，本文探讨了Vue中控制v-for循环次数的两种主要方法：使用数组的slice方法截取数组和使用v-if指令进行条件控制。这些方法简单且实用，可以灵活地应用于Vue项目中，帮助开发者更好地控制视图渲染的逻辑。通过理解...
基于vue v-for 多层循环嵌套获取行数的方法
10-17
本文将详细探讨在Vue中通过v-for实现多层循环嵌套时如何获取行数的方法。 ### 知识点一：v-for指令基础 v-for指令是Vue模板语法中用于渲染列表数据的一个重要工具。它可以通过一个数组或对象来遍历出多个节点。...
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
为了实现这个需求，我们需要对v-for循环的使用方式以及一些Vue中的指令和计算属性有深入的理解。 首先，v-for指令用于渲染一个列表，它可以根据数组或者对象遍历出每一个元素。在给定的代码示例中，使用v-for在...
使用for循环渲染时为什么不要将key值设为index？
Neekky的博客
08-03 1025
无论是Vue的v-for还是React的数组渲染，它们都要求设置一个key值，它默认用“就地复用”策略，方便了diff算法更高效的比对dom元素。 那为什么不推荐使用index作为key值呢？因为它可能会导致dom操作次数增多，从而拉低性能。 以React的JSX语法为例 const arr = ['a', 'b', 'c']; //key值设为元素本身 const newArr = arr.ma...
VUE中for循环key的值为什么不用index而是使用id
qq_39562831的博客
07-20 593
这是我在项目中出现过的bug，复制下面代码，自己运行一下就知道，使用index向最前面添加数据渲染的列表会有bug，先选中一条数据，再添加就会出现bug，使用id就不会，要问为什么会这样，这就涉及到了虚拟DOM的diff算法。{productName"羽毛球",id3},{productName"乒乓球",id2},{productName"篮球",id1},{productName"排球",id4},{productName"足球",id5},...
v-for 不要使用index作为key
dog_m的博客
09-17 520
问题记录：v-for 不要使用index作为key v-for 不要使用index作为key，否则数组插入数据，会重新渲染所有元素，造成性能问题 解决办法： 使用唯一的key
在vue的v-for中，key为什么不能用index？
bb_xiaxia1998的博客
12-14 628
简而言之，就是通过 JS 来模拟 DOM 结构，关于纠结以什么 JS 数据结构来模拟 DOM 并没有一套标准，只要能完全覆盖 DOM 的所有结构即可，下面以较为通用的方式演示一下。通过对 DOM 结构的分析，我们可以用 tag 表示 DOM 节点的类型，props 表示 DOM 节点的所有属性，包括 style、class 等，children 表示子节点（没有子节点则表示内容），这样子我们就把整个 DOM 通过 JS 模拟出来了，然后呢?然后看看下一章~~~
为什么使用v-for需要加key，key最好不是index
hangnan315的博客
07-25 1506
为什么使用v-for需要加key,key最好不是index vue使用的是虚拟DOM 如果在v-for的时候不加key，则当列表发生改变时（增加或删除）无法确定是哪一个改变，就只能重新渲染对应的虚拟DOM列表 如果有key值，则可以精确的找到列表中的那一项进行删除，性能更好。 为什么用index不好 因为index是按顺序进行排序，删除一个后，后面的所有的key值都会发生改变，在一些时候，会出现不可预想的问题 diff （vue中利用了diff算法） diff算法的处理方法 对操作前后的dom树同一层的节点
Vue 之v-for中获取index（element）
音尘啊
04-15 1万+
可以通过事件，把item和index传给函数，这样就能获取到idenx了，这样做的好处是我们定位一个数组元素的时候重名的时候用indexof就会获取到并不一定是我们想要的，来看element官网的一个实例 这是一个动态的可以关掉的标签，如果再添加一个标签一，如图： 如果把红色框框内的“标签一”关掉，最后我们想要的结果是：标签一，标签二，标签三 然后事实上的结果是：标签二，标签三，标签一 这是因...
vue 中 v-for 循环数字，index 从0开始。
热门推荐
是秃子总会发光
02-15 1万+
vue 中 v-for 循环数字，index 从0开始。
vue-v-for遍历index与id
最新发布
m0_64081601的博客
03-29 1423
当添加一个新的数据时，会生成新的数据段，然后生成新的虚拟DOM，这时就会使用虚拟DOM对比算法用新的虚拟DOM和旧的虚拟DOM进行对比。如果key相同的话，比较其他的一样不一样，若一样将旧虚拟DOM中映射出来的真实DOM的值进行复用，反之直接写入新的真实DOM之中。紧接着Vue就会根据新的数据生成新的虚拟DOM，然后新的虚拟DOM就会去和旧的虚拟DOM进行diff(虚拟DOM对比算法)如果key一样的话，进行其他的对比，一样的可以进行再次的复用，使用id作为key，保证了key的唯一性，防止数据错乱。
１、vue v-for循环中不要使用　index作为:key值
帅帅的廉颇的博客
02-28 1万+
开始学着做vue项目，一路不免有许多坑需要填，谨以此纪录我的排坑历程，以兹纪念。 １、v-for　循环中不要使用　index作为:key值，有可能导致第一次执行循环体初始化失败。 错误示例： 父组件： &amp;amp;lt;component v-for=&amp;quot;(grade, index) in gradeList&amp;quot; v-bind:grade=&amp;quot;grade&amp;quot; :key=&amp;qu
Vue - v-for 中为什么不能用 index 作为 key
Mark
05-01 2982
目录 1、先来看一个例子 2、上述问题的解决方法 3、不能用 index 作为 key 这是一篇脱坑日记，踩坑的原因是在做项目的过程中，我使用 v-for 指令渲染子组件，并将 index 绑定给 key，这一行为导致了删除操作会错删子组件的问题。而且我通过控制台打印信息，所有的信息都正常，并不知道深陷其坑的具体原因，询问大佬后恍然大悟，究其根源还是自己太菜，还要继续努力啊！ 1、先...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值