为什么Vue推荐在使用v-for时给对应元素或组件加上key

最新推荐文章于 2023-03-25 22:27:21 发布
最新推荐文章于 2023-03-25 22:27:21 发布
阅读量134 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45963949/article/details/118310485
版权

从代码开始
1.用li展示数组letters：
在这里插入图片描述
在这里插入图片描述

2.需求：从BC中插入显示字母F
在这里插入图片描述
3.思考：还记得，vue是有虚拟dom这一层的，那么li元素和字母的配对方式是怎样变化的呢
按照常理和性能来说，应该是像下图这样，新建一个li然后将F插入。在这里插入图片描述
实际上vue在这方面非常笨，他是这样的
在这里插入图片描述
vue在最后面新建了一个li，然后从B开始全部重新开始指定。。。

4.到这，是不是对为什么在v-for时对元素和组件加key开始有点了解了
简单来说，就是在每个li下加个标识，确保每个li都与每个字母绑定。从而使得新加入的字母会与一个新建的li绑定
在这里插入图片描述
5.代码实现
在这里插入图片描述
注意！绑定的值必须与被展示的内容相同，也就是item，不能是index或是其他。（保证其惟一性）

Living-v
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为什么使用v-for时，给对应的元素或组件添加上一个key属性？
XUYIGE的博客
09-02 272
为什么需要这个key属性呢？ 这个其实和Vue的虚拟DOM的Diff算法有关系 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点 我们希望可以在B 和 C之间加一个F，Diff算法默认执行起来是这样的： 即把C更新成F，D更新成C，E更新成D，最后再插入E，这样是不是很没有效率？ 所以我们需要使用key来给每一个节点做一个唯一标识 Diff算法就可以正确的识别此节点 找到正确的位置区插入新的节点 所以：key的作用主要是为了高效的更新虚拟DOM 代码举例： <!DOC
对齐：单个静态博客生成器使用vue组件和markdown文件
02-04
// 编译后的目录 对应的远程仓库，默认你有配置过远程仓库的SSH key distOriginSSh : 'git@github.com:xxx/xxx-blog-xxx.git' } ; 配置好之后， npm run build将把dist下的代码推送到地址git@github....
vue组件key组件绑定_一个Vue插件，用于将动画绑定添加到Vue组件
cuk5239的博客
07-24 624
vue组件key组件绑定 Vue-Anime (Vue-Anime) Simple Vue bindings for Anime.js. Anime.js的简单Vue绑定。 安装 (Install) $ npm install --save vue-animejs import VueAnime from 'vue-animejs'; Vue.use(VueAnime) 用法 (Usag...
v-for指令循环中key属性有什么作用？
weixin_40918145的博客
12-21 432
转载自：http://www.itcast.cn/news/20200720/1814543451.shtml key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。 如果不使用key, Vue会使用一 种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 而使用key时，它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。 有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误。 在截图中我们重点看红
vue强制刷新dom（使用v-if）（添加key）
believet93的博客
07-10 5183
最近在一个项目中遇到一个问题，点击按钮后，只能通过子组件向后端请求数据，但是点击按钮并不能重新加载子组件，因此无法向后端请求数据。 这里我们的子组件为 childComponent，实现刷新的方法如下： <childComponent v-if="refresh"></childComponent> <button @click="handleClick"></button> handleClick() { this.refresh = fa
v-for中key的作用
@tangguo123 博客
07-01 432
v-for中添加key属性的作用： 提高渲染性能：高效的更新虚拟DOM 避免数据混乱
vue入门之--路由.docx
03-26
1、安装 npm install vue-router --save ...在对应界面获取动态路由的值 this.$route.params get方法获取动态路由的值 <router to="'/home?id='+key">首页 在对应界面获取动态路由的值 this.$route.query
vue2和vue3的区别以及常问的题
最新发布
08-01
为了实现这一点，v-for 指令需要使用 key 属性来快速定位节点。 五、MVVM 模式 MVVM 模式是 Model-View-ViewModel 的缩写。其中，Model 代表数据模型，View 代表用户界面，ViewModel 代表视图模型。当模型的数据...
vue2+vue3笔记
07-14
插槽是一种组件的特殊形式：父组件将自己的结构传给子组件，然后在子组件中规定的位置里插入；作用域插槽子组件可以给父组件传递数据，必须采用template结构接收，用“scope 或者slot-scope 接收”。 九、关于在...
vue+element创建动态的form表单及动态生成表格的行和列
12-29
　最后我使用了笨方法,针对各个表单写好通用的组件，然后根据type用v-if来渲染对应的表单,数据，事件什么的都可以动态的传进去,比较好用 <el size=mini class=lj-form> <div v-for=(item,i) key=i> <!-- 0...
vue v-if 加key值的作用
rose999ying的博客
07-08 6298
<div id="app"> <template v-if="type === 'name'"> <label>用户名：</label> <input type="text" placeholder="请输入用户名..."> </template> <template ...
Vue的:key用法及示例
conquer_galaxy的博客
03-25 1021
值，会导致更新时出现问题，因为它们可能在不同的渲染周期中生成相同的值。正确的做法应该是使用一个稳定的唯一标识符，比如数据库中的 ID 值或者其他全局唯一的标识符。值来判断哪些元素是新增加的，哪些元素是被删除的，哪些元素需要更新，从而提高了渲染效率。属性是 Vue 中一个非常重要的属性，用于标识每个子元素的唯一性，确保渲染效率和正确性。指令循环遍历数组或对象时，每个子元素都需要绑定一个唯一的。值必须是唯一的、稳定的，并且不推荐使用随机数或者索引作为。的数组，然后为每个子元素绑定了一个唯一的。
vue 用 key 管理可复用的元素
weixin_43151921的博客
05-24 607
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email&...
图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法
weixin_34397291的博客
06-13 485
　　其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。 　　要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。 　　我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。 　　vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两...
面试官：说说为什么要在列表组件中写 key，其作用是什么？
weixin_44475093的博客
12-17 1211
一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <liv-for="iteminite...
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框中写入一些数据，并且进行页面切换，则原有的
在Vue中为什么v-for一定要加key
小帅的编程笔记
11-10 3129
如果你已经很熟悉Vue，一定也会很熟悉v-for指令。如果用过其他的前端框架的话，它们也都提供了在HTML模板中循环数据标记的方法。今天这篇文章让我们搞明白为什么key属性对于v-for这么重要。 我在刚开始写Vue时，也很少去写key 属性，因为它也不是必需的，不写也不会报错，也不会耽误数据渲染。但当项目中配了ESLint的规则，必需要写key时，我就统一的都把index索引作为key，然后接着开发，就像下面这样： <h1 v-for="(item, index) in list" :key="in
vue在组件上加key的作用
YimRay的博客
06-17 3297
1、key就是给每一个vnode的唯一id,可以依靠key更准确地拿到oldVnode中对应的节点。 2、还有一个就是避免组件“原地复用”带来的副作用，加上key，可以让组件在数据变化时强制更新组件。
vue组件的key
FantasyBreaker的博客
02-02 574
vue中列表循环需加:key=“唯一标识”，唯一标识可以是item里面id index等。因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。
为什么要给v-for循环添加唯一的key值
07-09
此外，当使用带有表单输入或组件状态的列表时，key 值还可以确保每个元素与其对应的状态正确地关联起来。如果没有 key 值，Vue 可能会出现状态错乱的情况。 因此，给 v-for 循环添加唯一的 key 值是一个良好的实践...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值