vue中v-for为何要加key?index为何不推荐作为key
在使用vue组件的时候,我们经常会遇到v-for必须要加key值
来举个例子进行说明吧!
不存在key的情况
<!--* @Author: angula* @Date: 2020-08-07 00:05:05* @LastEditTime: 2020-08-07 00:17:21* @FilePath: \Vue\study\test1\key详解.html
-->
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title><script src="../vue.js"></script>
</head><body><div id="box"><div><input type='text' v-model="name"><button @click="add">添加</button></div><ul><li v-for="(item,i) in list"><input type="checkbox">{{item.name}}</li></ul></div><script>var vm = new Vue({el: '#box',data: {name: '',id: 3,list: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王二' }]},methods: {add() {this.list.unshift({ id: ++this.id, name: this.name })this.namne = ''}}});</script>
</body></html>
此时我们选中最后一个值
这时候我们选择添加一个值
这时候我们会发现,选中的值由王二变成了李四
存在key值得情况
div id="box"><div><input type='text' v-model="name"><button @click="add">添加</button></div><ul><li v-for="(item,i) in list" :key="item.id"><input type="checkbox">{{item.name}}</li></ul></div><script>var vm = new Vue({el: '#box',data: {name: '',id: 3,list: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王二' }]},methods: {add() {this.list.unshift({ id: ++this.id, name: this.name })this.namne = ''}}});</script>
此时我们依旧选中王二
、
然后我们添加一个麻子,再观察一下选中得是否还是王二呢?
此时很明显,在加了key值之后,选中得值不会发生改变!
可以简单得理解:加了具有唯一性得key之后,id的checkbox跟内容进行了一个关联,是我们所要展示的效果
diff
diff算法的处理方法
对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图:
当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。
比如下面这种情况:
我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:
即把C更新成F,D更新成C,E更新成D,最后再插入E,相当没有效率!
所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id 等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。但是我们不推荐使用index作为key!
总结
总结:key的作用主要就是为了高效的更新虚拟DOM,使用key值,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。
为何不推荐index作为key值
当以数组为下标的index作为key值时,其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变
diff算法时比较同级之间的不同,以key来进行关联,当对数组进行下标的变换时,比如删除第一条数据,那么以后所有的index都会发生改变,那么key自然也跟着全部发生改变,所以index作为key值是不稳定的,而这种不稳定性有可能导致性能的浪费,导致diff无法关联起上一次一样的数据。因此,能不使用index作为key就不使用index。
vue中v-for为何要加key?index为何不推荐作为key相关推荐
- html5 语音包,在vue中使用vue-i18n按需加载语言包
1.新建目录结构如下: . ├── App.vue ├── assets │ └── langs │ ├── en │ │ └── index.js │ ├── zh │ │ └── inde ...
- Vue中实现特效下拉加载更多数据
1.功能需求 其实在很多的页面开发过程中,有些页面尤其是评论页面,在第一次加载的时候并不会加载很多的相关数据,而是加载一部分,当用户下拉旁边的滚动条时,尤其是滚动条移动到底部的时候,就会出现行的相关内 ...
- VUE中实现三维地图Cesium加载全国地质管地质地图
1.Vue中使用脚手架npm安装Cesium,安装命令:npm install cesium,加载三维地图Cesium,下载Cesium相关文件,安装成功后如下图所示: <div id=&quo ...
- html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别
今天vue的项目中,因为很多结构一样的条目,所以想到了使用循环.但是问题来了,每个条目的图标不一样,这就需要在循环中依次添加不同的字体图标的类名.直接使用class来操作,结果没有报错,但是图标也没有 ...
- vue spa php,在Vue中有关SPA首屏加载优化(详细教程)
本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一 ...
- 在VUE中使用RSA加密解密加签
RSA: 一般是客户端初始化时访问服务端时,服务端会生成一对RSA对,及公钥和私钥. 一,如果前端只需要将要传给后端的数据进行加密后传输,那么前端可以只要公钥,通过公钥对要传输的参数进行加密后把加密的 ...
- Swiper 在vue中的使用,loop=true获取真实index,数据更新刷新初始化swiper
1.安装 npm install swiper --save-dev 2.在组件中引用 import Swiper from "swiper" import 'swiper/dis ...
- 后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环 后台数组格式: 数组( ...
- Vue中使用高德地图,简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
最新文章
- Fastlane实战(一):移动开发自动化之道
- 买了一个软件测试就业班课程,不知道值不值
- 深入研究asp.net2.0——控件类库
- codeproject网页翻译
- 【MongoDB】NoSQL Manager for MongoDB 教程(基础篇)
- 020 Android之so文件动态调试
- 详细的DOS命令说明
- VS.Net 2005 Beta2连接Team Foundation Server的问题
- [转]掌控像素的虚实
- flask + react_再写一本 Flask 书
- [网络安全自学篇] 三十.文件上传漏洞、编辑器漏洞和IIS高版本漏洞及防御(三)
- (篇一)作为一个程序猿,这些C语言实例你必须会!
- 聊聊工作与生活的平衡
- MAC上mmap()的参数问题
- Cordova - 彻底搞定安卓中的微信支付插件!
- 谷歌浏览器无法同步问题解决方案
- 《Android移动应用基础教程》(Android Studio)(第二版)黑马教程 课后题答案 第11章
- 如何使用.REG文件来操作注册表
- 利用NMDS对药物处理下肠道菌群微生物群落多态性分析
- Google浏览器更改默认路径为D盘路径
热门文章
- 提问技巧(特别适用IT)
- verilog符号 与或非 异或_在Verilog HDL设计中用什么表示异或
- 用数学计算1.01的365次方等于37.8来说明积跬步至千里是否合理? 1.01^365=37.8 0.99^365=0.03
- Facebook应用开发之应用后台配置,以及GraphAPI使用(PHP-SDKJS-SDK)
- Android计算器(计算表达式,能计算小数点以及括号)方法简单易懂
- 火焰焰心matlab,火焰心_刘德华_高音质在线试听_火焰心歌词|歌曲下载_酷狗音乐...
- Halcon联合VS2010打开相机并显示
- Docker安装及镜像配置(常用命令介绍)
- SAP PCA利润中心会计案例教程后台配置
- 14个以春天为主题的网页设计