26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）

已于 2022-07-08 16:52:13 修改
阅读量718 收藏 1
点赞数 1
分类专栏： Vue全家桶从入门到精通 文章标签： vue.js 前端 javascript
于 2022-07-08 16:51:36 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.youkuaiyun.com/qq_37050372/article/details/125619693
版权
本文详细探讨Vue中列表渲染时key属性的重要性和工作原理，通过实例揭示使用index作为key可能引发的问题，建议使用唯一标识如p.id作为key，以避免虚拟DOM对比时的效率问题和界面错位。同时介绍了不使用key时的场景及可能的影响，总结了key在开发中的合理选择。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

目录

1.暴露问题，使用index作为key

2.使用唯一标识p.id作为key 

3.不写key的配置 

4.key的工作原理及虚拟DOM的对比算法

5.总结

25.Vue列表渲染_爱米酱的博客-优快云博客这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属性就是给遍历的每一项加了一个特殊标识，虽然https://blog.youkuaiyun.com

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue列表渲染中key的作用_Vue列表渲染中的key值的重要性
weixin_39851887的博客
12-20 795
1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了定...
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 5206
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
详解key在Vue列表渲染时究竟起到了什么作用
10-17
主要介绍了key在Vue列表渲染时究竟起到了什么作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue列表渲染中key的作用_详解key在Vue列表渲染时究竟起到了什么作用
weixin_39876650的博客
12-20 236
Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新...
react 、vue DOM的diffing算法——经典面试题
lixiaonaaa的博客
02-21 694
1、什么是DOM的diffing算法 1）diffing意为different，react、vue，都是先生成虚拟DOM之后，再转换为页面的真实DOM。 2）DOM更新时，react会先与之前的虚拟DOM做对比，和之前一样的节点可复用，不会重新渲染；然而与之前不同的节点，则重新生成。这样做是为了提高效率。 如下图，时间每隔一秒在变化，而输入框的内容不变。 2、面试题 1). react/vue中的key有什么作用？（key的内部原理是什么？) 当状态中的数据发生变化时，react会根据【新
vue列表渲染中key的作用_vue中：key的作用
weixin_39846664的博客
12-20 272
因为不理解 ：key(v-bind:key)，网上查了一些的资料，这篇写得非常不错，很简洁清楚。其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Dif...
key在Vue列表渲染时究竟起到了什么作用
weixin_37722222的博客
09-29 272
key的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 最常见的用例是结合...
vue key重复_vue中key属性作用彻底搞懂
weixin_39979215的博客
11-20 751
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成...
Vue前端框架——列表渲染时key的重要性
weixin_45661229的博客
09-28 804
因为将新数据添加的原数据的尾部按照顺序生成虚拟 DOM 后新数据的 key 应该为3，key 为3的话旧虚拟 DOM 中没有，那就只能乖乖的将新数据的整个 li 元素转换为真实 DOM。剩下的对比都遵循这个逻辑，依次生成真实 DOM，但是对比到最后一个发现 key 为3的在旧虚拟 DOM 中不存在，那就直接将 key 为3的 li 元素整个转换成真实 DOM，最后就出现了数据错乱的样子。在将索引作为 key 的那一小节中，大篇幅的讲解了其中的原理以及 Vue 的虚拟 DOM 对比算法是如何进行对比的。
列表渲染中的key的作用
weixin_44889992的博客
04-20 1026
列表渲染中的key的作用 给VDOM添加标记 如果没有key会产生的问题： VDOM是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了 解决： 使用key属性 使用： <li v-for = " (item,index) in list " :key ...
vue列表渲染中key的作用_列表渲染和Vue的v-for指令
weixin_39633102的博客
12-20 304
Web渲染是Web开发中最常用的实战之一。动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息。在我们使用的每个Web应用程序中，都可以看到很多内容列表被用于Web应用程序当中。在这篇文章中，我们将收集有关于Vue中的v-for指令生生动态列表的理解，并通过一些示例来说明为什么在这样做的时候应该使用key属性。由于我们将在开始编写代码时全面地解释一些事情，本文假设你对Vue或其他Jav...
第八节——Vue渲染列表+key作用
weixin_57017198的博客
10-28 531
3.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；3.使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，实际项目中如果没有id，推荐使用index）1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法。4.使用key给每个节点做一个唯一标识，Diff算法就可以正确识别此节点，"就地更新"找到正确的位置插入新的节点。
vue列表渲染中key的作用_详解key在Vue.js列表渲染时究竟起到了什么作用
weixin_28684497的博客
12-30 227
详解key在Vue.js列表渲染时究竟起到了什么作用发布于 2020-11-19|复制链接摘记: Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。Vue2更新真实DO...
Vue中Key的作用
最新发布
ggq53219的博客
07-19 879
在列表渲染中，如果列表项的顺序发生变化或者列表项被添加、删除，拥有唯一key的列表项可以帮助Vue准确地判断哪些列表项是新添加的，哪些列表项是已存在但位置改变的，哪些列表项是被删除的。当Vue在进行虚拟DOM的diff算法比较新旧节点时，如果节点具有相同的key，Vue会认为它们是相同的节点，从而避免不必要的重新渲染，提高渲染效率。综上所述，Vue中的Key在列表渲染和DOM更新过程中发挥着至关重要的作用，它不仅是节点的唯一标识，还是提高渲染效率、保持组件状态正确性和优化性能的关键。
vue列表渲染中key的作用_写React/Vue项目时为什么要在列表组件中写key，其作用是什么？...
weixin_39673471的博客
12-20 239
没有绑定key的情况下，在遍历简单模板的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。{{ i }}var vm = new Vue({el: '#app',data: {dataList: [1, 2, 3, 4, 5]}})以上的例子，v-for的内容会生成以下的dom节点数组，我们给每一个节点标记一个身份id：['1', // id： A'2',...
列表渲染，key的作用与原理
qq_45431103的博客
08-14 474
列表渲染，key的作用与原理
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未来@音律

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值