v-for循环中key值的作用

最新推荐文章于 2022-08-23 12:34:33 发布
最新推荐文章于 2022-08-23 12:34:33 发布
阅读量298 收藏 1
点赞数 1
分类专栏： 前端Vue面试题 JavaScript 文章标签： javascript css vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49790903/article/details/116380229
版权

V-for循环key值的作用

在Vue中 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素，key值类似于ID具有唯一性。

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

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

  1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
  2. 同一层级的一组节点，他们可以通过唯一的id进行区分。
    基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)
    这里我们借用React’s diff algorithm中的一张图来简单说明一下：
    在这里插入图片描述

Diff算法简析

  1. 当页面的数据发生变化时，Diff算法只会比较同一层级的节点。

  2. 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点的子节点了。

  3. 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

在这里插入图片描述

我们往一个列表里面插入一条数据
在这里插入图片描述

Diff算法默认执行的是这样子
在这里插入图片描述
分析下整体流程：

  • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作

  • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作

  • 比较C，F，相同类型的节点，进行patch，数据不同，发生dom操作

  • 比较D，C，相同类型的节点，进行patch，数据不同，发生dom操作

  • 比较E，D，相同类型的节点，进行patch，数据不同，发生dom操作

循环结束，将E插入到DOM中
一共发生了3次更新，1次插入操作

在使用key的情况：vue会进行这样的操作：

  • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作

  • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作

  • 比较C，F，不相同类型的节点

  • 比较E、E，相同类型的节点，进行patch，但数据相同，不发生dom操作

  • 比较D、D，相同类型的节点，进行patch，但数据相同，不发生dom操作

  • 比较C、C，相同类型的节点，进行patch，但数据相同，不发生dom操作

循环结束，将F插入到C之前

一共发生了0次更新，1次插入操作
通过上面两个小例子，可见设置key能够大大减少对页面的DOM操作，提高了diff效率

절차 원숭이
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
[vue] 动态加载图片和页面跳转
YHLQ的博客
02-10 1623
动态加载图片的方法 方法一： <el-carousel-item v-for="item in imgList" :key="item.id"> <img :src="item.img" alt="图1" /> </el-carousel-item> data(){ return { imgList: [ { id: 1, img: require("../../asset
Vue中的v-for循环key属性注意事项小结
10-18
主要介绍了Vue中的v-for循环key属性注意事项小结,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 2.0 :key的作用
Jq的博客
07-15 439
&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属性为元素添加了一个唯一身份...
key=“item.id“ 报这个错误，改成 :key=“index“ 就好了
u012746918的博客
07-17 898
key="item.id" 报这个错误，改成 :key="index" 就好了
【前端框架学习】v-for指令和key属性
Jerry‘s word
01-15 721
1.迭代数组 <p v-for="item in list">{{item}}</p> data: { list: [1, 2, 3, 4, 5, 6] } 当然，我们需要用到数组中某一项的索引值时，可以写： <p v-for="(item, i) in list">索引值是{{i}}----每一项的值是{{item}}</p> 除了循环普通数组以外，我们也可以循环复杂数组： <p v-for="user in list2"&
v-for，key属性的作用
xinxin7789的博客
01-03 1万+
vue中key的作用
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈vue.js中v-for循环渲染
12-29
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 一、简介 vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染...希望本文对理解和使用Vue中`v-for`循环列表控制按钮隐藏显示功能有所帮助，如果有更多问题，欢迎继续探讨。
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的作用
老__L的博客
02-24 5031
list : [ {id : 1 , name : '张三' } , {id : 2 , name : '李四' } , {id : 3 , name : '王五' } , {id : 4 , name : '在最后添加的一条数据' } ]此时前三条数据直接复用之前的，新渲染最后一条数据，此时用 index 作为 key，没有任何问题。
v-for中的key值
m0_62351100的博客
02-16 3976
key 是什么 简单来说key是给每一个vnode的唯一id，同时也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点 详细来说的话 1.vue中使用for循环的话要加上:key 他的值是唯一的标识，这个唯一标识最好是item的id。因为vue组件高度复用的原因，增加key可以标识组件的唯一性，也是为了更好的区分个别组件，key的作用主要是为了更高效的更新虚拟DOM。 2.key主要是做DOM diff算法用的，diff算法是同级进行比较，比较当前标签上的key还有他当前
Vue v-for指令
qq_45748438的博客
08-11 2548
列表渲染 v-for 指令的使用 v-for指令可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图 遍历数组 1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组 1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐ 遍历对象 2.1 使用方式：v-for=“value in obj” value 表示对象的属性的值 obj就是需要遍历的对象
第六篇 v-for中的key值设置
灵魂学者的博客
08-23 1596
最常见的key值使用就是在v-for渲染列表中，v-for 指令基于一个数组做的一个列表渲染，在做这样的列表渲染当中我们会使用到 key 值的设置，一般的我们习惯的用索引值来做我们的key值，所以我们先来讲一下用key值用索引和不用索引的一个对比。
Vue2.0 v-for 中 :key 到底有什么用？
u014527697的博客
07-10 6074
转自：Vue2.0 v-for 中 :key 到底有什么用？因为不理解   ：key（v-bind:key），网上查了一些的资料，这篇写得非常不错，很简洁清楚。     其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。     要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。     我们知道，vue和react都实现了一套虚拟DOM，使我们可...
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
weixin_34367257的博客
04-26 287
本文参考：https://www.cnblogs.com/tim100/p/7262963.html 结论： 当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。 即： items: [ { id: 2, }, ...
Vue2.0中 v-for指令中的key用法
sunling的专栏
01-12 1万+
vue学习 {{key}}--{{item.name}}--{{item.age}} var foo = new Vue({ el:'#app1', data:{ items:[
深入理解vue.js2.0指令v-for使用及索引获取
Lucky_LXG的博客
02-25 1万+
深入理解vue.js2.0指令v-for使用及索引获取        v-for                                   基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：                     {{ item.text }}
vue里的v-for和key
E_li_na的博客
05-31 1503
当vue用v-for渲染列表的时候，默认地，它采取“就地补丁”策略。如果数据项的顺序改变了，vue将在原地修补每个元素，并且确保它映射到特定的索引的渲染上，而不是移动DOM元素去匹配项目的顺序。这和vue1.x的track-by=&amp;quot;$index&amp;quot;行为类似。 vue要跟踪每个节点的身份，重用和重新排序所有元素，我们必须给它一个提示以便它完成这些工作。**我们必须为每个item提供一个唯一的key属...
v-for 循环key
最新发布
08-30
v-for 循环中的 key 是为了给每个迭代的元素分配一个唯一的标识符。它的作用是帮助 Vue.js 进行高效的元素更新和重用。 在 Vue.js 中，当使用 v-for 渲染一个数组时，Vue.js 需要追踪每个元素的身份，以便在数据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值