vue v-for遍历中的key的作用与原理

于 2024-01-24 21:33:05 发布
阅读量340 收藏 5
点赞数 10
分类专栏： vue学习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61895507/article/details/135831745
版权

vue内部在使用，在浏览器开发者工具中看不到key的存在，是在虚拟dom中存在的

虚拟dom对比算法：

        首选判断key是否相等，再判断“张三”和“老刘”，发现不相等，使用新的虚拟dom中的老刘；接下来对比input中的type，发现相等，使用初始虚拟dom中的type text。

index作为key

id作为key

如果没有写key

如果在v-for中没有写key，则会默认将数组的index值作为key。

:key="index" 和 :key="p.id" 的使用场景：

当需要破坏数组的顺序时，不能使用数组的index，要使用；

当不会破坏数组的顺序事，则可以使用数组的index作为key的唯一标识。

总结：

学习web的giser
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 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 在最后，而是直
浅谈Vue2.0中v-for迭代语法的变化(key、index)
01-19
今天，在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功，问题如下： 结果这个对象的key值并不能够显示： 后来查阅了文档才知道，这是因为在Vue2.0中，v-for迭代语法已经发生了变化： 丢弃了： 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后： 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key、index)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持
VUE中V-IF条件判断改变元素的样式操作
12-28
方法一 v-if判断后用标签改变样式（特定显示列字体加粗） {{col.text}} {{item[col['value']]}} </v-list-i
v-for中的key值
m0_62351100的博客
02-16 3940
key 是什么 简单来说key是给每一个vnode的唯一id，同时也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点 详细来说的话 1.vue中使用for循环的话要加上:key 他的值是唯一的标识，这个唯一标识最好是item的id。因为vue组件高度复用的原因，增加key可以标识组件的唯一性，也是为了更好的区分个别组件，key的作用主要是为了更高效的更新虚拟DOM。 2.key主要是做DOM diff算法用的，diff算法是同级进行比较，比较当前标签上的key还有他当前
v-for中key值所产生的问题（详解）
m0_73490373的博客
06-06 713
vue中的key有什么作用?(key的内部原理)key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下:2.对比规则:(1).旧虛拟DOM中找到了与新虚拟DOM相同的key:@.若虛拟DOM中内容没变，直接使用之前的真实DOM!@.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
V-for中的key
weixin_44154577的博客
03-06 371
V-for中的key属性 （一）为什么需要这个key属性？ 这个其实和Vue的的虚拟DOM的diff算法有关系 （二）当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的 即把C更新成F，D更新C，E更新成D，最后插入F，很没有效率（数据结构链表） （三）所以我们需要使用key来给每个节点做一个唯一标识 Diff算法就可以正确的识别此节点 找到正确的位置区插入新的节点 四）key的作用主要是为了高效的更新虚拟D
v-for中的key
m0_62351590的博客
02-07 803
一、Key是什么 有两种 <ul> <li v-for="item in items" :key="item.id">...</li> </ul> 用+new Date()生成的时间戳作为key，手动强制触发重新渲染 <Comp :key="+new Date()" /> key的概念 key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点 1. 在写v-for的时
Vue: v-for的键值key
热门推荐
qq_41609404的博客
11-14 4万+
v-for中的key        我们现在在使用v-for的时候，都必须会加上一个必要的key值，并且很多人会使用index来作为key，其实这样是不太妥当的一种做法。那么v-for中的键值key到底有什么作用呢。        首先看一看vue文档里的说法：       emmm，好像还是比较难懂，换种说法       在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；...
v-for中key详解
Zing_ing的博客
07-23 686
key值的作用
v-for中为何要使用key
田兴的博客
11-02 4708
一、什么是vuex vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态 五个属性： state、getters、mutations、actions、module 基本使用: 新建store.js文件，最后在main.js中引入，并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} con
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于v-for 遍历中的key的解释与理解
08-30
关于v-for 遍历中的key的解释与理解
浅谈vue.js中v-for循环渲染
12-29
vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象...
vue的注意规范之v-if 与 v-for 一起使用教程
12-29
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中 所以，不推荐v-if和v-for同时使用 使用推荐方式： <li nv-for=user activeUsers :...
V-for中 key 值的作用，如何选择key
最新发布
TianXuab的博客
11-15 481
Vue.js 中的 v-for 指令是一个强大的工具，可以用于循环渲染列表数据。在使用 v-for 指令时，我们经常需要为每个循环项指定一个 key 值。本文将深入探讨 key 值的作用，并为您提供如何选择 key 值的建议和指导。
v-for中key的作用
hyk495495的博客
11-26 3454
v-for中key的作用
面试官：说说为什么要在列表组件中写 key，其作用是什么？
weixin_44475093的博客
12-17 1193
一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <liv-for="iteminite...
v-for中key值的作用
zybijiso666的博客
08-01 336
因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。
vue中v-for使用key
zy的博客
02-16 7984
什么是key？ vue中列表v-for循环需要加上的一个属性，不加，系统就会提示报错，:key=“唯一标识” 唯一标识可以是item里面id（index）等，因为vue组件高度复用性，增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。 所以，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。 比如：在我们使用
vue v-for遍历对象
08-10
回答: 在Vue中，可以使用v-for指令来遍历对象。你可以像遍历数组一样遍历对象的属性。比如，你可以使用以下代码来遍历一个对象的属性： ``` <div id="app"> <ul> <li v-for="(value, key) in info">{{key}}: {{value}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { info: { name: 'why', age: 18, height: 1.88 } } }) </script> ``` 在上述代码中，我们使用v-for指令来遍历info对象的属性。在每次循环中，我们将属性的值赋给value，属性的键赋给key，然后可以在模板中使用它们。这样，我们就可以将对象的属性列表显示为一个无序列表。123 #### 引用[.reference_title] - *1* *2* *3* [Vue：循环遍历（v-for）](https://blog.csdn.net/yufengguanyun/article/details/123297502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值