vue v-for循环动态获取_快速、简洁讲明Vue中vfor循环key的作用
概要
关于v-for
中的key
问题,其实这已经是个很常见的问题了,基本网上一搜一大把,面试的时候也常常会被问到,讲这个问题可能会设计DOM
与虚拟DOM
,还有很重要的Diff
算法。传送门
作用(重头戏)
我们都知道,Vue
很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就渲染新的数据呈现在页面上。
那么问题来了,对于用v-for
渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作。
假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事了。
而key的出现就是尽可能的回避这个问题,提高效率,如果我们给列表增加了一条数据,页面只渲染了这数据,那不就很完美了。
v-for
默认使用就地复用策略,列表数据修改的时候,他会根据key
值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。
我们经常使用会使用index
(即数组的下标)作为key
,但其实不推荐怎么使用。
例如:
list = [ { id: 1, num: 1 }, { id: 2, num: 2 }, { id: 3, num: 3 },];
<div v-for="(item, index) in list" :key="index">{{item.num}}div>
上面这种情况我们使用了index
作为了key
。
1.在数组后面追加一条数据
list = [ { id: 1, num: '1' }, { id: 2, num: 2 }, { id: 3, num: 3 }, { id: 4, num: '新增加的数据4' }];
此时前三条数据页面不会重新渲染,直接复用之前的,只会新渲染最后一条数据,此时用index
作为key
,没有任何问题。
2.在数组中间插入一条数据
list = [ { id: 3, num: 1 }, { id: 4, num: '新增加的数据4' }, { id: 2, num: '2' }, { id: 3, num: '3' }];
页面在去渲染数据的时候,通过index
定义的key
的比较,会有:
之前的数据 之后的数据
key: 0 index: 0 num: 1 key: 0 index: 0 num: 1key: 1 index: 1 num: 2 key: 1 index: 1 num: '新增加的数据4'key: 2 index: 2 num: 3 key: 2 index: 2 num: 2 key: 3 index: 3 num: 3
通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染。
是不是很惊奇,我明明只是插入了一条数据,怎么三条数据都要重新渲染?而我想要的只是新增的那一条数据新渲染出来就行了。
最好的办法是使用数组中不会变化的那一项作为key
值,对应到项目中,即每条数据都有一个唯一的id
,来标识这条数据的唯一性。
使用id
作为key
值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染呢?例如:
list = [ { id: 1, num: 1 }, { id: 4, num: '新增加的数据4' }, { id: 2, num: 2 }, { id: 3, num: 3 }];
之前的数据 之后的数据
key: 1 id: 1 index: 0 num: 1 key: 1 id: 1 index: 0 num: 1key: 2 id: 2 index: 1 num: 2 key: 4 id: 4 index: 1 num: '新增加的数据4'key: 3 id: 3 index: 2 num: 3 key: 2 id: 2 index: 2 num: 2 key: 3 id: 3 index: 3 num: 3
现在对比发现只有一条数据变化了,就是id
为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的。
同理在react
中使用map
渲染列表时,也是必须加key
,且推荐做法也是使用id
,也是这个原因。
其实,真正的原因并不是vue
和react
怎么怎么,而是因为Virtual DOM
使用Diff
算法实现的原因。
关于Diff简析
当页面的数据发生变化时,Diff算法只会比较同一层级的节点。
如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点的子节点了。
如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。
举个例子
我们往一个列表里面插入一条数据:
Diff算法默认执行的是这样子:
这样子的话效率就很慢了,这时需要使用key来给每个节点做一个唯一标识,Diff
算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
原文:juejin.cn/post/6899602713860898830
今日福利公众号回复【666】抽1999的耳机
1.你的点赞、在看
是对【鬼哥】最大的支持,一键三连吧
2.回复资料包
领取我整理的前端进阶资料包
3.回复加群
,加入无广告前端进阶群,和小伙伴一起学习讨论!
vue v-for循环动态获取_快速、简洁讲明Vue中vfor循环key的作用相关推荐
- Python基础_第3章_Python中的循环结构
Python基础_第3章_Python中的循环结构 文章目录 Python基础_第3章_Python中的循环结构 Python中的循环结构 一.回顾分支练习题 1.判断是否为一个合法三角形 2.求世界 ...
- 学习笔记_关于switch在whlie中无限循环的解决办法_C语言
学习笔记_关于switch在whlie中无限循环的解决办法_C语言 今天在做作业的时候突然发现一个问题 #include<stdio.h> int main() {int a;while( ...
- php v-for=,Vue中v-for循环节点的实现代码
本篇文章给大家带来的内容是关于Vue中v-for循环节点的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Title 父循环第一次 子循环第一次 json数据的第几条 数值 ...
- vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
- VUE中v-for循环
v-for的使用 当我们需要对一组数据循环的时候,可以用到它. v-for循环 格式: v-for="(item, index) in items" 格式说明:index为可选参数 ...
- 关于Vue分页循环动态获取页码
在一次案例中我用到了mybatis-plus分页的插件.但是前端不知道怎么动态生成页面 @RequestMapping("/page/{pageNumber}")public Pa ...
- Android --- 动态获取定位权限时: Fragment 中 onRequestPermissionsResult 方法不执行
今天我在写百度地图 API 定位功能的时候遇到了这样一个问题,需要在打开 APP 首页的时候动态获取定位权限,然后我的代码是这样写的(在 Fragment 中) @Nullablepublic Vie ...
- 驱动下通过进程PID获得进程名 (动态获取ImageFileName在EPROCESS结构体中的相对偏移)...
思路 进程EPROCESS结构体中含有进程名ImageFileName(需求处ImageFileName在EPROCESS结构体中的相对偏移)-->获得进程EPROCESS-->通过进程句 ...
- 单元格内多个姓名拆分成一列_快速拆分单元格中的多个姓名
龙源期刊网 http://www.qikan.com.cn 快速拆分单元格中的多个姓名 作者:王志军 来源:<电脑知识与技术 · 经验技巧> 2018 年第 01 期 如图 1 所示,这里 ...
最新文章
- java获取当月有几天_你真的能在JAVA开发这条路上面一直坚持下去吗?
- HTML+CSS实例——漂亮的查询部件(一)
- boost标准库开发环境搭建boost标准库环境搭建以及简单案例介绍
- 全栈深度学习第3期: 怎样科学管理实验数据?
- redis 集群配置(centos)
- [转]STL的内存分配器
- 服务器硬盘gpt,硬盘采用GPT分区非常重要
- mcldownload文件夹_download文件夹是什么?Win7系统download文件夹可以删除?
- 【c#】DGV中复制粘贴数据最详细代码
- “新主”难救美赞臣?
- Ubuntu查找软件命令
- android studio找不到app moudle
- html js验证登录页面,js判断登录与否并确定跳转页面的方法
- Spring aop(Aspectj)对dynamic proxy的类是无能为力的
- CHIL-ORACLE-循环 语法
- 解析蓝牙模块的运用方案
- 这群白帽黑客,是网络世界的守夜人 ​
- 酷柚易汛进销存商业版,支持独立部署,数据更安全!
- 会卸磨杀驴公司的特征之一:从其公司整体公司分布反测
- Mac 和 Android 手机之间互传文件,这四种方法简单高效!
热门文章
- 计算机网络实验七报告6,计算机网络实验七..doc
- mac android mtp,果粉也用安卓!MacBook连接安卓机最好的工具
- c语言115写成16进制,西安电子科技大学计算机导论与C语言程序设计 计算机文化概论.pdf...
- RTT的线程同步篇——事件
- C语言指针作为参数的传递问题
- PAT乙级(1013 数素数)
- SQL必知必会-联结
- http post请求 参数放在路径后面 java_【思唯网络学院】网络基本概念之HTTP协议...
- 云和恩墨张皖川:产品能力提升是推动国产替代进程的关键因素
- 案例:控制文件序列号满故障处理和分析