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

最新推荐文章于 2024-03-29 20:43:15 发布
最新推荐文章于 2024-03-29 20:43:15 发布
阅读量2k 收藏 2
点赞数 4
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MATLAb1234000/article/details/121263975
版权

内部原理

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

使用下标

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

使用唯一值,如id

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

结论

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

MATLAb1234000
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在写vue的项目中为什么index不能做key使用？
发果叁
12-16 1883
介绍完这两种情形下，在我们平常的conding中，为了使我们能按时下班，我们也应该拒绝用index作为key来使用。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率 在这两种DOM树的比较中，我们可以看到用index作为key值时，在列表倒装时，其生成的新的DOM树结构发生了改变，这就导致了diff有要重新去执行一遍，导致性能的浪费。
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
vue 里面通过v-for循环出来多个相同样式的div,根据index作为对象的属性的参数拼接取值
是大林的林吖-博客
07-23 3213
一、[ ] 和 . 的区别 1、 . 是要对象存在该属性才可赋值取出 2、 [ ] 即使对象不存在该属性也可以赋值和取出 二、v-for循环 通过 v-for=“index of number” ，number为自定义的一个数字 三、.后面不能让字符串与index进行拼接，而[ ] 里面是可以让字符串与index进行拼接。即 对象[“字符串”+index] 四、代码实现 <div class="battery" style="margin-top: 10px; margin-left: 30px"&
vue-v-for遍历index与id
最新发布
m0_64081601的博客
03-29 685
当添加一个新的数据时，会生成新的数据段，然后生成新的虚拟DOM，这时就会使用虚拟DOM对比算法用新的虚拟DOM和旧的虚拟DOM进行对比。如果key相同的话，比较其他的一样不一样，若一样将旧虚拟DOM中映射出来的真实DOM的值进行复用，反之直接写入新的真实DOM之中。紧接着Vue就会根据新的数据生成新的虚拟DOM，然后新的虚拟DOM就会去和旧的虚拟DOM进行diff(虚拟DOM对比算法)如果key一样的话，进行其他的对比，一样的可以进行再次的复用，使用id作为key，保证了key的唯一性，防止数据错乱。
v-for循环为什么不建议用index作为key
qq2861793863的博客
06-16 448
如果我们以循环的索引作为 key，这些节点的 key 值也会随之发生变化，导致它们被识别为新创建的节点，而不是仅更新相应的内容。通常情况下，我们使用一个唯一的值来作为每个节点的 key，这样可以确保每个节点都有一个独特的标识符，方便 Vue 进行跟踪和比对。节点顺序发生变化时，会导致不必要的重新渲染。如果两次渲染的节点顺序不同，即使实际上这些节点的内容是一样的，也会导致整个列表的重新渲染。相反，应该尽可能使用具有唯一性的值作为 key，例如每个数据项的唯一 ID，以便正确地跟踪和比对节点，提高渲染性能。
Vue v-for指令
qq_45748438的博客
08-11 2548
列表渲染 v-for 指令的使用 v-for指令可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图 遍历数组 1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组 1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐ 遍历对象 2.1 使用方式：v-for=“value in obj” value 表示对象的属性的值 obj就是需要遍历的对象
使用vue时如何获取v-for数组的下标index值的方法
热门推荐
weixin_43968782的博客
10-28 2万+
<div v-for="(item,index) in arr" : key="index" @click="getIndex(item,index)"> <p>{{item}}</p> </div> methods:{ getIndex(item,index){ console.log(item,index) //这里的item是点击获取当前值的每一项内容 //这里的index是点击获取当前值的下标 } } ...
vue v-for直接循环数字实例
01-19
vue v-for直接循环数字，也就是固定次数 项目中需要做一个酒店星级，酒店星级就是固定的5星，根据后台返回的数据来显示几星级  <!--星级，循环固定次数 5次 根据酒店等级显示亮的星星和灰色的星星--> <...
浅谈vue.js中v-for循环渲染
12-29
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 一、简介 vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后...
vue 使用v-for进行循环的实例代码详解
10-15
在 `<tbody>` 标签中，`<tr v-for="(book,index) in books" :key="book.title">` 表示对于 `books` 数组中的每一项，Vue 将创建一个新的表格行（`<tr>`）。这里的 `(book, index)` 是一个解构赋值，`book` 是当前...
浅谈VUE中演示v-for为什么要加key
10-15
本文将深入探讨在Vue中使用`v-for`时为何需要添加`key`以及它的工作原理。 首先，让我们通过一个示例来了解问题。在不使用`key`的情况下，当动态向列表中添加元素时，可能会出现预期之外的行为。例如，如果选中了一...
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
vue使用Element组件时v-for循环里的表单项验证方法
08-27
Vue 使用 Element 组件时 v-for 循环里的表单项验证方法 对 Vue 使用 Element 组件时 v-for 循环里的表单项验证方法进行详细介绍。主要讲解了如何在使用 Element 组件时处理 v-for 循环里的表单项验证问题。 首先...
vue 实现v-for循环回来的数据动态绑定id
10-16
`:key`属性用于帮助Vue识别列表中元素的变化，这里使用`index`作为唯一标识符。但更为重要的是`:id`属性，它通过`forId`方法动态生成每个`li`元素的ID。 ```javascript new Vue({ el: '#cat2s', data: function()...
vue v-for循环重复数据无法添加问题解决方法【加track-by=’索引’】
12-29
本文实例讲述了vue v-for循环重复数据无法添加问题解决方法。分享给大家供大家参考，具体如下： 问题： 错误提示如下： 解决问题的代码示例： <!DOCTYPE html> <html lang=en> <head> <meta ...
详解在Vue.js编写更好的v-for循环的6种技巧
10-15
1. **始终在v-for循环中使用`:key`**：在使用v-for时，指定`:key`属性至关重要。这有助于Vue在更新DOM时更有效地识别和跟踪元素，避免不必要的重排。例如，当遍历一个对象数组时，可以使用每个对象的唯一标识符（如`...
在vue项目中为啥不能用index作为key？
前端达人
11-02 1418
啊？不是吧，在vue中，不能使用index作为key呢？使用index作为key又好理解又方便，为什么不能使用呢？看文章就知道啦~.一、key的作用是什么？key的作用众所周知，看一个demo就知道：<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <body> ...
vue ：for循环根据index动态绑定css样式
江咏之
08-23 1542
1:html: <ul> <li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,item.path)"> <router-link :to="item.path" :class="{ 'active-class': nowIndex === index }"> <img :src="item.icon"

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值