vue2.0 v-for中 ：key 的作用

最新推荐文章于 2023-07-16 16:59:24 发布
最新推荐文章于 2023-07-16 16:59:24 发布
阅读量221 收藏
点赞数
分类专栏： Vue

提高循环性能，其实这个东西写不写都行，就算你写错了他也不会报错，但是一般写for循环写上比较好。

key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

 

转自：https://segmentfault.com/q/1010000009383694/a-1020000009408585

一名写前端的GISer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE2.x中key关键字的作用以及为什么不能用index做key（解读并展示官网说法）
yuan5801551的博客
08-16 1049
直接上图 本文适合人群：不懂为什么要加key <div class="content"> <ul> <li v-for="(list,index) in lists"> {{list.id}}-{{list.name}} <button @click='...
Vue2.0 v-for filter列表过滤功能的实现
10-18
在Vue2.0中，`v-for`指令用于遍历数组或对象，生成对应的DOM元素。结合`filter`函数，我们可以实现列表的过滤功能，帮助用户动态筛选出满足特定条件的列表项。以下是对Vue2.0 `v-for`与`filter`功能的详细解析： 1....
初学Vue（全家桶）-第6天（vue2）：列表渲染、key的作用和原理、列表过滤、列表排序
lalala_dxf的博客
05-23 634
初学Vue 列表渲染 遍历数组类型 v-for=“p in person”:key=“p.id” v-for=“(p,index) in person”:key=“index” 遍历对象类型 key作用与原理 列表过滤 列表排序
vue 2.0 :key的作用
Jq的博客
07-15 451
&lt;div v-for="item in items" :key="item.id"&gt; &lt;!-- 内容 --&gt; &lt;/div&gt; 1.如果数据更新的有相同的数据就会直接利用key去渲染，有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。 2.key的用法一般是:key=‘id’，意思是为元素绑定一个key属性，这个key属性为元素添加了一个唯一身份...
vue中的key的作用？
weixin_47450807的博客
03-26 1万+
一、写在前面 下面总结一下，vue中的key的作用，在vue中我们可能在两种情况下使用key，第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key。下面我们来看一下key在其中起到的作用。 二、在v-if中使用key 首先我们先看在vue中出现的一种情况，我们在vue中如果使用v-if进行切换时，此时Vue为了更加高效的渲染，此时会进行前后比较，如果切换前后都存在的元素，则直接复用。如果我们在模板中切换前后都存在input框，此时我们在input框中写入一些数据，并且进行页面切换，则原有的
v-for 中key的作用
m0_66051368的博客
02-25 1万+
key
浅谈Vue2.0中v-for迭代语法的变化(key、index)
08-27
在Vue2.0中，不应该直接使用`$key`来访问`v-for`循环中的`key`值。正确的做法是在循环元素上通过`:key`绑定`key`值： ```html <div v-for="(value, key) in object" :key="key"> {{ value }} - {{ key }} ```...
vue2.0使用v-for循环制作多级嵌套菜单栏
08-27
总之，掌握如何在Vue2.0中使用`v-for`循环制作多级嵌套菜单栏，将有助于你在构建用户界面时更有效地组织和展示数据，提高用户体验。不断探索和实践，你将能够创建出更加丰富和功能强大的菜单系统。如果有任何疑问或...
v-for中key属性的作用
最新发布
mz929的博客
07-16 180
Vue中为v-for提供了一个属性,key,在写v-for的时候,都需要给元素加上一个key属性这个key属性必须是唯一的标识,并且给key赋值的内容不能是可变的。若对数据进行:逆序添加,逆序删除等破坏顺序操作,会产生没有必要的真是dom更新,芮然界面效果没问题,但效率低。2.如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,知识简单的展示数据,用index也是可以的。3.如果对数据的逆序添加,逆序删除等破坏顺序草错,用index作为key值,效率低。1.提升v-for渲染的效率。
vue中key的作用
qq_41417772的博客
10-21 151
vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。 vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。2. 同一层级的一组节点，他们可以通过唯一的id进行区分。 基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。 当某一层有很多相同的节点时，也就是列表节点时，Diff算
详解key在Vue列表渲染时究竟起到了什么作用
12-12
Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？ 在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。 Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点，所以在diff中逻辑都是为了减少新的创建而更多的去复用已有DOM节点来完成DOM的更新。 在新旧vnode的diff过程中，key是判断两个
Vue系列之v-for中key的作用
老__L的博客
02-24 5066
list : [ {id : 1 , name : '张三' } , {id : 2 , name : '李四' } , {id : 3 , name : '王五' } , {id : 4 , name : '在最后添加的一条数据' } ]此时前三条数据直接复用之前的，新渲染最后一条数据，此时用 index 作为 key，没有任何问题。
Vue：v-for中为什么要使用key
hhwpf的博客
07-08 1448
同上面操作，还是选中第一个节点的复选框，删除前的key是1 2 3，因为删除的是第一个数据，所以删除后的key就是2 3，这时候就会知道2和3是需要复用的，1是被删除掉的，这时候就会根据key找的对应节点做移动，最后删除没有找到key的元素，这时候就正确了。key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。算法就可以正确的识别此节点，找到正确的位置区插入新的节点；
v-for的key属性的作用
热门推荐
liuyuhua666的博客
06-19 3万+
vue中在进行列表渲染的时候，会默认遵守 就地复用策略 就地复用策略： 当在进行列表渲染的时候，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止 Vue中为v-for提供了一个属性，key： key属性可以用来提升v-for渲染的效率！，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲...
vue中v-for的key的作用原理
weixin_51938803的博客
06-04 181
vue中v-for的key的作用原理
vue 中:key 的作用
sunhy007的博客
07-21 6296
vue中在进行列表渲染的时候，会默认遵守 ‘就地复用策略’ 就地复用策略： 当在进行列表渲染的时候，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止 Vue中为v-for提供了一个属性，:key key属性可以用来提升v-for渲染的效率！，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去 在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识. (有相同
Vue2.0 v-for 中 :key 到底有什么用？
u014527697的博客
07-10 6080
转自：Vue2.0 v-for 中 :key 到底有什么用？因为不理解   ：key（v-bind:key），网上查了一些的资料，这篇写得非常不错，很简洁清楚。     其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。     要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。     我们知道，vue和react都实现了一套虚拟DOM，使我们可...
Vue中v-for里面key的作用
唐璜Taro的博客
07-16 2257
随着Vue的不断发展，深入了解技术背后的原理也越来越重要，很多人都开启了Vue源码学习，本文就介绍了v-for中key的基础内容。以上就是今天要讲的内容，本文仅仅简单介绍了Key的处理过程。
vue中v-for中: key的作用
wallace_yang的博客
01-07 4608
在使用vue列表渲染v-for时，我们最好在后面加上: key，它的作用是当v-for所绑定的数据发声变化时只重新渲染变化的项，而不是重新渲染整个列表，这除了可以节约资源以外更重要的是可以避免一些bug，比如使用列表渲染生成的一个多选项，我们勾选了其中的第一项，勾选后我们在向数据的开头加入一个数据，如果我们没有使用key的话，就会发现勾选的变成我们新加的项，而之前的第一项变成了第二项，且没有被勾选。加了key之后就可以避免这个现象， key的值只要是一个唯一的数据就可以，一般情况我们使用列表渲染中的inde
vue2.0实现todolist
05-14
好的，下面是一个简单的 Vue 2.0 实现 todolist 的例子： 首先，我们需要创建一个 Vue 实例，并在 data 属性中定义一个数组 todos： ``` <!DOCTYPE html> <meta charset="UTF-8"> <title>Vue Todo List ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值