vue :key 的问题

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


如果key 是index ，会有问题     比如右滑删除第一个，这时候index 等于0  的状态是右滑，删除之后第2个变味第一个，也默认是右滑。可以让key 是id 。id 都是不一样的，index，在删除会一样，出现问题，之所以我用了id+index，是因为数据好像出错了，出现了两个一样的id

蚁族的奋斗1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue–key值的特殊用处详解
11-19
数组的v-for item in items item of items item,index in items (item，index) in items 对象的v-for（键值，键名，索引） value in object (value, key) in object (value, key, index) in object v-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用已在页面渲染好的元素，不会移动 DOM 元素来匹配数据项的顺序，这种模式是高效的，改变现有位置的结构的数据即可 eg： 问题：点击翻转数组哦，高亮并没有跟随1 在最后，而是直
VUE key值问题
qq_54118302的博客
07-21 272
VUE中v-for的key值问题
vue学习-2
qq_37361400的博客
08-03 117
用v-for遍历时，有遍历数组和对象的区别。在遍历数组时 v-for="(item,index) in arr"，其中item是值，index是索引。在遍历对象时v-for="(val,key,index) in obj"，其中val是对象值，key是属性，index是索引。例如： var vm = new vue({ el:'元素对象'， data:{ ...
vue3 不推荐使用index作为v-for遍历的key
James_liPeng的博客
11-01 1903
vue3 不推荐使用index作为v-for的key
Vue中的key
qq_54591762的博客
01-05 2404
页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象), 循环中 ,如果没有唯一 key , 页面上删除一条标签, 由于并不知道删除的是哪一条! 所以要把全部虚拟 dom 重新渲染, 如果知道 key 为对应标签被删除掉, 只需要把渲染的 dom 为对应标签去掉即可!
vue中v-for 中 :key的一系列问题 (3)
会点php的前端小渣渣
11-05 432
为什么不能用 默认的index 作为 key？ 如果你用 index 作为 key，那么在做特殊操作新增或者删除某项的时候，内部默认的index 永远都是连续的，可能会出现bug, 所以有时候不写key、或者写了默认的key效果是一样的。 再通俗点： 这也是vue不推荐使用数组下标作为key的原因。例如数组删除了一个元素，那么这个元素后方元素的下标全都前移了一位，之前key对应的数据和dom就会乱了，除非重新匹配key，那就容易产生错误。如果重新匹配key，等于全部重新渲染一遍，违背了使用...
vue中v-for循环key值问题研究
Bekind2010的专栏
04-25 7572
介绍 关于key的作用，官方是这样描述的： ​ key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 之前不知道在哪里看的文章，一直以为使用key是为了就地复用，但是从上面的描述中可以看到
Vue中key的作用及原理
cun的博客
10-11 2万+
在vue中key的作用是什么？实现原理是什么？如果不写会怎么样？
Vue中 key的作用与原理
最新发布
weixin_51735748的博客
08-07 2138
你真的了解Vue中的key吗？
【Vue中key的原理】
小田是个程序员的博客欢迎你的到来呀~
04-04 4010
在Vue中，以key为对比算法标识，在数据修改或更新后，通过key这个唯一标识进行对比虚拟DOM，从而决定节点的重新加载以及复用。
详解如何理解vue的key属性
12-29
如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如...那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢。如下测试代码： <p>{{ item.title }}</p>
minicoin-vue：使用Vue构建的简单个人理财经理
02-10
将其放在VUE_APP_EXCHANGERATE_API_KEY变量中。 创建用于Web的应用。 将您的配置数据（在创建应用后显示）放在以下VUE_APP_FIRE_变量中。 启用和模块。 转到“身份验证/登录方法”页面。 在登录提供商中启用电子...
vue:vue原始解析-源码解析
03-24
Vue配置详解 var obj = new Vue ( { el : "#root" , //指定 Vue 管辖元素 methods : { "key" , fn } , //注册方法到obj上,fn中的this就是obj events : { "key" : fn } , //注册事件 watch : { "key" , fn } , //...
auto_deploy_vue:可以一键部署的vue项目
04-13
打包前请务必配置根目录的ecosystem.config.js中的PROJECT_PATH host key 和repo 字段,否则部署不成功. 确保服务器能够正常访问git仓库,否则git clone不成功, 确保服务器安装了node 和 npm. 确保服务器开启免密登录,...
vue key值问题
wuxian_wj的博客
04-09 479
key
Vue: v-for的键值key
热门推荐
qq_41609404的博客
11-14 4万+
v-for中的key        我们现在在使用v-for的时候，都必须会加上一个必要的key值，并且很多人会使用index来作为key，其实这样是不太妥当的一种做法。那么v-for中的键值key到底有什么作用呢。        首先看一看vue文档里的说法：       emmm，好像还是比较难懂，换种说法       在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；...
vue中的key
王小涵的笔记的博客
10-19 583
推荐使用数据的唯一标识作为key，比如id，身份证号，手机号等等，通常这些数据由后端提供。后续操作不破坏原来数据顺序的话，使用index作为key也没有任何问题。新旧虚拟dom会根据key进行对比。（1）新旧dom中有相同的key。key是虚拟dom对象的标识。
Vue学习--key
qq_43070052的博客
11-20 372
vue中的key
【Vue】中Key的作用
z914020826的博客
10-09 5101
虚拟DOM，通过对象来表示真实的DOM结构。key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据 新数据 生成 新的虚拟DOM。
Vue中:key作用, 为什么不能用索引
06-02
在 Vue 中，每个节点都需要一个唯一的 `key` 属性来标识其在 DOM 树中的状态。`key` 的作用是为了更好地更新虚拟 DOM 和真实 DOM，能够更好地跟踪每个节点的身份，从而更好地管理和更新节点。 具体来说，当 Vue 更新视图时，会先生成一棵新的虚拟 DOM 树，然后与旧的虚拟 DOM 树进行对比，找出需要更新的节点。在对比节点时，Vue 会使用 `key` 属性来判断两个节点是否相同。如果两个节点的 `key` 值相同，那么 Vue 会认为这两个节点是同一个节点，可以直接复用旧节点的 DOM 元素。如果两个节点的 `key` 值不同，那么 Vue 会删除旧节点的 DOM 元素，重新创建一个新节点的 DOM 元素。 因此，使用 `key` 属性可以更好地管理和更新节点，提高应用的性能和用户体验。而使用索引作为 `key` 值可能会导致一些问题，例如当数组中的元素发生变化时，索引可能会发生变化，从而导致 Vue 认为原来的节点已经不存在了，需要重新创建新节点，这可能会导致一些性能问题。 总之，`key` 属性是非常重要的，必须保证每个节点都有唯一的 `key` 值，不能使用索引等不稳定的值作为 `key` 值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值