Vue中v-for不绑定key会怎样

最新推荐文章于 2024-03-04 10:45:24 发布
转载 最新推荐文章于 2024-03-04 10:45:24 发布 · 1.8k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/zhansu/p/9524217.html
在Vue中，使用v-for指令遍历列表时，绑定唯一的key可以显著提升性能。当列表项变动，如插入新元素时，仅重新渲染变化的元素而非整个列表，避免不必要的DOM操作，提高应用响应速度。

　　

Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染该元素，而不是全部元素都重新渲染，会提高性能。性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是
在列表中插入某个元素，不会像index那样导致后面的元素全部重新渲染，而是根据绑定id的元素是否变化渲染。

https://segmentfault.com/a/1190000013810844
https://www.zhihu.com/question/61064119
https://www.cnblogs.com/tim100/p/7262963.html

转载于:https://www.cnblogs.com/zhansu/p/9524217.html

标签
#javascript #ViewUI
v-for 为什么加 key？不加 key 会怎么样？
祈澈菇凉
02-07 413
在使用v-for渲染列表时，始终推荐为每个项目提供一个唯一的key属性。这不仅可以提高性能，还能保持组件的状态，避免不必要的错误和不稳定的渲染行为。
v-for使用/不使用key
sleep_early_的博客
05-25 1761
不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。 虚拟DOM中key的作用 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2)
【精】vue中v-for循环为什么要使用key
李卓书
07-01 630
文章目录下载源码官网说明举个例子探索本源 下载源码 https://vuejs.org/js/vue.js 下载完源码后直接script引用，方便调试 官网说明 维护状态： 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
vue v-for循环的key值使用经验及采坑总结
bamboozjy的博客
08-13 4254
必要性: vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错. 使用方法: 1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key.这可避免节点增删时出现数据或其他错误(本人就踩了一次坑,使用了索引导致数据出错)。 或者循环数组自定义一个key值,key='key' + i++.
使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果
a456456_132的博客
06-25 1105
使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果 Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM保持数据的唯一 不绑定会导致所有列表DOM重新渲染 ...
Vue中 v-for 绑定key和不绑定key的区别
Guo1111122的博客
08-02 1803
首先，它们区别主要在于 虚拟DOM的复用，绑定key可以更好的复用，下面来详细讲一下 假如我们有一个数组 arr = [1,2,3,4]，我们要在2后面插入一个值9； 如果绑定了key值，那么会是这样的情况： 如果没有绑定key值，那么会是这样的情况： 转载于:https://www.cnblogs.com/adongyo/p/11287887.html...
1. Vue的常用指令及作用2. vue常用的修饰符3. v-for 循环为什么一定要绑定key？4. 为什么不建议用index索引作为key?5. 计算属性computed 和watch 的区别
lnbzj的博客
02-14 200
1. Vue的常用指令及作用（学过的必须讲，没学过的算是提前预习了可说可不说） 2. vue常用的修饰符（学过的必须讲，没学过的算是提前预习了可说可不说） 3. v-for 循环为什么一定要绑定key ? 4. 为什么不建议用index索引作为key? 5. 计算属性computed 和watch 的区别是什么及其各自的运用场景？
for循环一定要指定键么 vue_快速、简洁讲明Vue中v-for循环key的作用
weixin_39852953的博客
12-20 198
原标题：快速、简洁讲明Vue中v-for循环key的作用概要关于 v-for 中的 key 问题，其实这已经是个很常见的问题了，基本网上一搜一大把，面试的时候也常常会被问到，讲这个问题可能会设计 DOM 与虚拟 DOM ，还有很重要的 Diff 算法。传送门作用(重头戏)我们都知道， Vue 很大的一个特点就是双向数据绑定，数据一旦改变，那么页面就渲染新的数据呈现在页面上。那么问题来了，对于用 v...
v-for指令循环中key属性的作用
黑马程序员官方博客
07-14 1035
今天我们来聊一聊关于在vue中v-for指令中for作用 以下图片来自vue官方关于key属性的截图 在截图中我们重点看红线框选的话,接下来我们来使用个案例来演示一下 接下来我们来演示下我们添加水果后的效果 在添加商品之前将2号水果香蕉选中 然后我们输入我们要添加的水果项,点击添加按钮, 我们会发现我们之前选中的2号,选中的状态变成了1号水果苹果 其实这个原因,可以参考在第一张截图中提到关于key的描述, 。如果不使用 key，Vue 会使用一种最大限度...
vue学习笔记（一） ---- vue指令（v-for 和 key 属性）
保持清醒
10-24 518
vue指令之v-for和key属性 一\ v-for 1. v-for循环数组 <div id="app"> <h3>好饿，我好想吃~~~~</h3> <ul v-for="menu in list"> <li>{{menu}}</li> </ul> </div> <script> var vm = new Vue({ el: '#app
搞懂diff算法的时间复杂度和v-for绑定key的作用
m0_48999777的博客
06-01 1283
一、理解diff算法 我们知道对于真实DOM斜体样式的操作是非常昂贵的，因此有了虚拟DOM的概念，虚拟DOM的节点被称为vnode。当DOM节点发生变化时，通过新vnode与旧vnode的比较，来减少重绘重排的操作，这样能大大提升效率。而新旧vnode的比较就是通过Diff算法实现的。 1.传统的Diff算法 当页面进行渲染后，会生成一个虚拟DOM保存在内存中，节点发生变化时又生成新的虚拟DOM，传统的Diff算法是通过遍历循环对比新的虚拟DOM与之前保存的旧的虚拟DOM之间的变化（两层嵌套时间复杂度为O（
v-for为什么一定得绑定:key
qq_43102118的博客
07-22 495
v-for为什么一定得绑定:key 如果不绑定:key，则每删除数组中一个元素，v-for都会先删除所有元素副本，再重新建整个列表——修改效率低。绑定:key是给每个元素副本添加一个唯一的标识，在删除数组元素时，可根据唯一标识找到对应的一个元素对象，删除即可，其它元素不受影响——修改效率高 ...
dom不刷新 vue 加数据后_踩坑vue v-for操作DOM后不更新
weixin_39523887的博客
12-21 873
踩坑vue v-for操作DOM后不更新前言最近在看vue的风格指南时，发现了一个以前在学习，甚至开发时忽略的问题。现象看到上面的一段话，想到自己在刚开发的时候遇到过类似的问题。就是在强行修改DOM后(比如改变class)；将v-for 模板数组中，改变的这条删除掉，发现，该class还在。延伸到的场景就是先选择一个或者多个列表，改变了样式(表明该列表被选中)，再删除选中的类别。此时发现该样式还在...
v-show 和 v-if 的作用和区别,v-bind 和 v-model的作用和区别 什么情况下回导致跨域 vue生命周期 使用vue中的v-for时为什么要绑定 :key vue 组件通信如何实现
A_AOA_A的博客
06-24 437
v-show 和 v-if 的作用和区别       v-show和v-if的作用：控制元素的显示与隐藏       v-show切换元素的didplay属性none隐藏block显示       用来控制元素显示隐藏初始化会渲染       适用于频繁切换显示隐藏
vue2中使用v-for时Key报错
m0_71933288的博客
03-04 541
v-for循环key值报错
vue 用key拿对象value_基于vue--key值的特殊用处详解
weixin_29532927的博客
01-12 1458
数组的v-foritem in itemsitem of itemsitem,index in items(item，index) in items对象的v-for(键值，键名，索引)value in object(value, key) in object(value, key, index) in objectv-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用...
1.Let与var与const的区别 2、vue 双向数据绑定（mvvm）原理 3、为什么v-for需要key？为什么不建议用遍历的index当key
weixin_53024314的博客
03-09 183
1.Let与var与const的区别 Var声明的变量会挂载在window上，而let和const声明的变量不会 Var声明的变量存在变量提升，let和const不存在变量提升 同一作用域下var可以声明同名变量，let和const不可以 Let和const声明会形成块级作用域 Let暂存死区 Const一旦声明必须赋值，不能用null占位，声明后不能再修改，如果声明的是复合类型数据，可以修改属性 2.VUE实现双向数据绑定的原理就是利用了 Object.define
Vue中的v-for为什么要添加唯一的key属性，作用解答
JackieDYH的博客
03-04 1199
没有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属性的作用
热门推荐
xinxin7789的博客
01-03 1万+
vue中key的作用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值