VUE中不要用index作为key

最新推荐文章于 2023-01-31 11:00:09 发布
最新推荐文章于 2023-01-31 11:00:09 发布
阅读量466 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huhao820/article/details/117445716
版权

VUE中不要用index作为key

  1. key是Vue中的通过v-for循环出来的虚拟dom的唯一标记，并且key在组件整个生命周期中需要保持稳定性。
  2. 通过key可使diff算法操作更快更准确，提高虚拟dom的操作性能。
  3. 不要用index作为key，由于sameVnode函数，可能会重新更新虚拟dom(属性、类名、样式、指令)，从而增加真实dom的操作。
  4. 更不要用随机数作为key，由于sameVnode函数，会触发创建新节点、删除旧节点、销毁节点，降低性能。(销毁一个dom节点并创建一个新的再插入是消耗非常大的。)
子夜夜猫的人生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为什么不推荐使用index作为key？
祈澈菇凉
10-24 687
将索引作为 key 可能导致错误的渲染结果。当列表发生重新排序、插入或删除操作时，索引可能会发生变化，导致 Vue 无法正确识别和更新具有相同索引的元素。如果列表中的元素需要进行重排序，使用索引作为 key 会导致 Vue 销毁并重新创建所有元素，而实际上只有一部分元素需要进行位置调整。不推荐将索引（index）作为 key 的原因是，索引在列表发生变化时可能会导致意外的渲染结果和性能问题。如果列表中的元素与动态数据或输入框绑定，使用索引作为 key 可能导致输入框的状态丢失或与错误的数据绑定。
详解为什么Vue中不要用index作为key(diff算法)
10-15
这篇文章深入探讨了为什么不应该在 Vue 中使用索引(index)作为列表项的 `key`，并涉及到了 Vue 的 `diff` 算法。 `key` 的主要作用是在 Vue 的虚拟 DOM (vDOM) 更新过程中帮助有效地识别和跟踪组件，以优化性能。当...
在 Vue 中为什么不推荐用 index 做 key
mutouren_abc的博客
04-19 2099
前言 前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。 key的作用 Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极
react/vue中的key有什么作用？——#基础知识#面试题 2021-04-06
weixin_44914404的博客
04-06 336
问题描述： 1）react/vue中的key有什么作用？（key的内部原理是什么？） 2）为什么遍历列表时，key最好不要用index？ 分析与回答： 1. 虚拟DOM中key的作用： 1）简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 2）详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diffing进行比较，比较规则如下： ...
在写vue的项目中为什么index不能做key使用？
发果叁
12-16 1884
介绍完这两种情形下，在我们平常的conding中，为了使我们能按时下班，我们也应该拒绝用index作为key来使用。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率 在这两种DOM树的比较中，我们可以看到用index作为key值时，在列表倒装时，其生成的新的DOM树结构发生了改变，这就导致了diff有要重新去执行一遍，导致性能的浪费。
vue循环列表中绑定:key的作用
Amelian的博客
09-22 2942
首先按官网介绍的，可以主要用在Vue的虚拟Dom算法，在新旧节点对比时辨识VNodes。使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。 vue中循环列表时，绑定:key的值往往有两种方式，一是将循环列表的索引值index作为key，而是根据返回数据中的唯一标识作为key。不管以什么方式绑定key，key的值在列表中必须是唯一的，可以使用index的原...
vue中使用v-for时为什么不能用index作为key
11-21
React 中的 key 也是如此 如果已经了解 为什么要用key，可以通过目录直接跳到下一节。 为什么要用key？ Vue 和 React 都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏...
使用vue for时为什么要key【推荐】
10-16
使用`key`的例子：当为每个`v-for`项指定`:key`属性，例如`:key="index"`，Vue能够跟踪每个元素的唯一性。在上述数组更新的例子中，Vue会根据`key`值正确地插入新元素（'0'）并移除旧元素（'6'），而不是简单地修改...
在vue项目中为啥不能用index作为key？
前端达人
11-02 1420
啊？不是吧，在vue中，不能使用index作为key呢？使用index作为key又好理解又方便，为什么不能使用呢？看文章就知道啦~.一、key的作用是什么？key的作用众所周知，看一个demo就知道：<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <body> ...
vue中key的作用，为什么不建议用index作为key
weixin_59201679的博客
01-31 556
Vue中key的作用
面试官：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）
azl397985856的专栏
05-01 2265
前言Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。示例以这样一个列表为例：<ul> ...
１、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
for循环中的key值的重要性(vue,react,uniapp),以及不要使用index作为key
苦夏木禾
04-27 2204
我列举了三个框架语言(vue,react,uniapp),都是虚拟DOM
为什么v-for中的key值不推荐使用index
weixin_34005042的博客
05-09 2054
首先我们举一个例子 我们现在有这个数组 [ { 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？
热门推荐
艾欢欢的博客
08-02 1万+
结论： 更新DOM的时候会出现性能问题（复用） 会发生一些状态bug 为什么要用key？ key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。总...
为什么 Vue 中不要用 index 作为 key
学习记录
04-13 2301
前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 示例 以这样一个列表为例： <ul> <li>1</li> <li>2</li> </ul> 那么它的vnode也就是虚拟 dom 节点大概是这样的。 { ...
快问快答----Zookeeper实现分布式锁的思路
彪悍大蓝猫的博客
03-08 673
面试时曾被大佬深深一锤，给我“讲讲用Zookeeper实现分布式锁的思路”？ 如果对zookeeper不熟悉的同学，肯定会头脑一震，血压上升，言语结巴，额......额.......额...... 面试官：你懂我的意思吧？然后面试基本上就凉凉了。 我们假设A和B同时去竞争一个临界资源，那么为了保证数据一致性或避免由于资源争夺引起的问题，所以需要分布式锁。 ...
Vue中v-for为什么必须要key？为什么不能用index作为key？
Carol的小星球
07-31 3384
首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。.
vue中v-for用index作为key
最新发布
03-16
在Vue中，v-for指令可以用来循环渲染数组或对象的数据。在使用v-for指令时，我们需要为每个循环项指定一个唯一的key值，以便Vue能够跟踪每个项的变化。 通常情况下，我们可以使用循环项的唯一标识符作为key值。但是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值