vue v-for 最好不要index作为key

最新推荐文章于 2024-03-06 08:07:15 发布
最新推荐文章于 2024-03-06 08:07:15 发布
阅读量161 收藏
点赞数
分类专栏： vue 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_ding/article/details/120664726
版权

为什么要用key？

Vue 和 React 都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

Vue 和 React 的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

  1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
  2. 同一层级的一组节点，他们可以通过唯一的id进行区分。

为什么不能用index作为key

vue中 如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素

结论：

  1. 更新DOM的时候会出现性能问题
  2. 会发生一些状态bug
  3. React 中的 key 也是如此
  4. 如果已经了解 为什么要用key，可以通过目录直接跳到下一节
时光机上敲代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在vue的v-for中，key为什么不能用index？
bb_xiaxia1998的博客
11-08 859
简而言之，就是通过 JS 来模拟 DOM 结构，关于纠结以什么 JS 数据结构来模拟 DOM 并没有一套标准，只要能完全覆盖 DOM 的所有结构即可，下面以较为通用的方式演示一下。通过对 DOM 结构的分析，我们可以用 tag 表示 DOM 节点的类型，props 表示 DOM 节点的所有属性，包括 style、class 等，children 表示子节点（没有子节点则表示内容），这样子我们就把整个 DOM 通过 JS 模拟出来了，然后呢?然后看看下一章~~~参考前端vue面试题详细解答。
浅谈VUE中演示v-for为什么要加key
10-15
如果你遍历的是一个对象数组，`index`也可以作为`key`，但通常不推荐这样做，因为当对象的顺序发生变化时，`index`作为`key`可能不足以区分元素。此外，如果列表项是自定义组件，`key`还能帮助Vue区分不同的组件实例...
Vue中的v-for中为什么不推荐使用index作为key值
最新发布
有我更精彩的博客
03-06 2092
在Vue中，我们经常会用到`v-for`指令来遍历数组或对象并渲染列表。而在使用`v-for`指令时，通常会需要给每个遍历的元素指定一个唯一的`key`值，以帮助Vue更高效地更新DOM。
vue3 不推荐使用index作为v-for遍历的key
James_liPeng的博客
11-01 1955
vue3 不推荐使用index作为v-for的key
为什么使用v-for需要加key，key最好不是index
hangnan315的博客
07-25 1143
为什么使用v-for需要加key,key最好不是index vue使用的是虚拟DOM 如果在v-for的时候不加key，则当列表发生改变时（增加或删除）无法确定是哪一个改变，就只能重新渲染对应的虚拟DOM列表 如果有key值，则可以精确的找到列表中的那一项进行删除，性能更好。 为什么用index不好 因为index是按顺序进行排序，删除一个后，后面的所有的key值都会发生改变，在一些时候，会出现不可预想的问题 diff （vue中利用了diff算法） diff算法的处理方法 对操作前后的dom树同一层的节点
在 Vue 中为什么不推荐用 index 做 key
树上骑个猴的博客
11-09 2984
性能消耗 使用 index 做 key，破坏顺序操作的时候， 因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode 都需要重新创建。 例子： <template> <div class="hello"> <ul> <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li> <br>
在vue的v-for中使用索引index值
01-06
下面我们将详细探讨在Vue的`v-for`中如何使用索引`index`值。 首先，`v-for`语法的基本形式是： ```html <template v-for="(item, index) in array"> <!-- 内容 --> ``` 这里的`item`是数组中的当前项，`index`...
vue中使用v-for时为什么不能用index作为key
11-21
在Vue和React等现代前端框架中，`v-for`（Vue）或`map`（React）等指令用于遍历数组并动态渲染列表。在使用这些指令时，为列表项提供`key`属性是非常重要的，因为它对虚拟DOM的Diff算法有着直接影响。然而，使用索引...
vue v-for直接循环数字实例
01-19
vue v-for直接循环数字，也就是固定次数 项目中需要做一个酒店星级，酒店...svg class=icon aria-hidden=true v-for=index of 5 :key=index> <use v-if=index xss=removed rel=external> <use v-else xlink:hre
vue v-for循环中不要使用index作为:key值
www930942的博客
11-11 2089
内部原理 v-for循环时会先在缓存中判断当前的key对应的这一项是否在缓存中: 是的话,会直接取出来,更新数据 否则,重新在缓存中创建基于当前key的数据,然后渲染到页面 使用下标 例:循环一个数组,完成之后,在给数组unshift一个元素,会导致新插入的这个元素直接去匹配缓存中index为0的那一项,而不会重新去创建 即index已经不是第一次渲染的元素了,映射关系已经改变 使用唯一值,如id 例:循环一个数组,完成之后,在给数组unshift一个元素,由于新的id和缓存中的不匹配,他还是会去
１、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中为什么要使用key值作为唯一标识？同时为什么不推荐使用index来作为key值？
TangelaYue的博客
03-18 1372
vue中列表循环需加：key值作为唯一标识，唯一标识可以是item里面id等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好的区分各个组件key的作用主要是为了高效的更新虚拟DOM。但是我们不推荐使用index作为key！ 总结：key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。 为何不推荐index作为key值 当以数组为下标的index作为key值时，其中一个元
vue中v-for为何要加key？index为何不推荐作为key
angula
08-07 8074
在使用vue组件的时候，我们经常会遇到v-for必须要加key值 来举个例子进行说明吧！ 不存在key的情况 <!-- * @Author: angula * @Date: 2020-08-07 00:05:05 * @LastEditTime: 2020-08-07 00:17:21 * @FilePath: \Vue\study\test1\key详解.html --> <!DOCTYPE html> <html lang="zh-CN"> <head
v-for 绑定key值,不建议使用index (原因详解)
weixin_46174785的博客
07-10 6957
v-for 中的key值： 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; 例子： const list = [ { id: 1, name: 'test1', }, { id: 2, name: '
Vue中v-for为什么必须要key？为什么不能用index作为key？
Carol的小星球
07-31 3398
首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。.
为什么v-for中的key值不推荐使用index
weixin_34005042的博客
05-09 2060
首先我们举一个例子 我们现在有这个数组 [ { id:201401, name:'chen' }, { id:201402, name:'sun' }, { id:201403, name:'wang' }, ] 如果我们使用index做key在我们渲染到页面的时候变成 li key:0 ，id:201401,name:chen li key:1 , id:201402...
Vue中使用v-for不能用index作为key值
weixin_43487782的博客
09-17 1239
今天在改一个项目，有一个<el-tabs>的列表循环，需要根据权限控制列表项的显示，代码如下： <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in accessTabs" :key="index" :label="item.label" :name="i
vue中diff v-for中key为什么不能用index表示?
fps_ll的博客
03-30 1013
首先,vue中v-for中的key，为什么不能使用index，而是多使用其id或者其他数据中的唯一值。这其中肯定有一些道理。 就比如： <ul> <li>1</li> <li>2</li> </ul> 他的虚拟DOM就是如下,也就是vnode { tag: 'ul', children: [ { tag: 'li', children: [ { vnod...
vue中v-for用index作为key
03-16
在使用v-for指令时，我们需要为每个循环项指定一个唯一的key值，以便Vue能够跟踪每个项的变化。 通常情况下，我们可以使用循环项的唯一标识符作为key值。但是，如果循环项没有唯一标识符，我们可以使用循环的索引值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值