v-for中的key值的作用

最新推荐文章于 2023-08-01 21:14:25 发布
最新推荐文章于 2023-08-01 21:14:25 发布
阅读量97 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54904533/article/details/116274943
版权

key是dom节点的唯一标识，与内容相关联

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

首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况：我们要在A、B、C、D、E列表中B后面插入F

当key=index时，前后dom树是这样子的：



把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

key=index和key=id对比：

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

Bpab
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈Vue2.0中v-for迭代语法的变化(key、index)
01-19
结果这个对象的key值并不能够显示： 后来查阅了文档才知道，这是因为在Vue2.0中，v-for迭代语法已经发生了变化： 丢弃了： 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, ...
VUE中V-IF条件判断改变元素的样式操作
12-28
方法一 v-if判断后用标签改变样式（特定显示列字体加粗） ... <v key='i' v-if='col.text==' xss=removed> <v><b>{{col.text}}</b></v> <v class='align-end mystyle'><b>{{item[col['value']]}} </v-list-i
v-for 中key的作用
m0_66051368的博客
02-25 1万+
key
v-for中的key是什么作用？
zayyo的博客
03-08 7956
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。 这个key属性有什么作用呢？我们先来看一下官方的解释： key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes； 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法； 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素； 详细来说，我们知道，vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以
v-for，key属性的作用
xinxin7789的博客
01-03 1万+
vue中key的作用
v-for中key的作用
hyk495495的博客
11-26 3451
v-for中key的作用
vue核心面试题：v-for中为什么要用key
热门推荐
王三六博客
08-14 1万+
一、v-for中为什么要用key 1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。 2.key主要用来做domdiff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。 3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，.
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于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渲染的...
详解v-for中:key属性的作用
Dax1_的博客
02-26 7574
举个栗子 不设置key <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item, i) in list"> <input type="checkbox"
v-for中的:key属性的作用
qq_49643195的博客
06-04 1312
key的主要作用就是为了高效的更新虚拟DOM key必须是唯一标识(确保唯一性)，不建议直接使用index 在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识。给key赋值的内容不能是可变的 尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，..
Vue系列之v-for中key的作用
老__L的博客
02-24 5012
list : [ {id : 1 , name : '张三' } , {id : 2 , name : '李四' } , {id : 3 , name : '王五' } , {id : 4 , name : '在最后添加的一条数据' } ]此时前三条数据直接复用之前的，新渲染最后一条数据，此时用 index 作为 key，没有任何问题。
v-for中key值的作用
最新发布
zybijiso666的博客
08-01 332
因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。
v-for的key的作用
coderheart的博客
06-04 3022
vue中v-for指令key属性的作用
vue面试题
weixin_53944118的博客
03-14 293
v-show和v-if的区别 v-if：控制dom元素的显示或隐藏是将DOM元素整个添加或删除； v-show：控制DOM的显示或隐藏是为DOM元素动态的添加css样式 display，设置成 block 或者 none DOM元素还是存在的。 为何v-for中要用key 1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。 2.key主要用来做dom di
vue中v-for key 值的作用
06-28
在Vue中，v-for指令用于循环渲染数组或对象的数据，而key属性则是用来帮助Vue识别每个节点的唯一性，从而提高渲染性能的。...因此，我们应该尽可能地为v-for循环中的每个节点设置唯一的key值，以提高Vue的渲染性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值