v-for中为何要使用key
一、Key是什么
开始之前,我们先还原两个实际工作场景
当我们在使用v-for时,需要给单元加上key
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
123
用+new Date()生成的时间戳作为key,手动强制触发重新渲染
<Comp :key="+new Date()" />12
那么这背后的逻辑是什么,key的作用又是什么?
key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点
场景背后的逻辑
场景1: 当我们在使用v-for时,需要给单元加上key
- 如果不用key,Vue会采用就地复地原则:最小化element的移动,并且会尝试尽最大程度在同适当的地方对相同类型的element,做patch或者reuse。
- 如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destoryed
场景2: 用+new Date()生成的时间戳作为key,手动强制触发重新渲染
- 当拥有新值的rerender作为key时,拥有了新key的Comp出现了,那么旧key Comp会被移除,新key Comp触发渲染
二、设置key与不设置key区别
举个例子:
创建一个实例,2秒后往items数组插入数据
<body>
<div id="demo">
<p v-for="item in items" :key="item">{{item}}</p>
</div>
<script src="../../dist/vue.js"></script>
<script>
// 创建实例
const app = new Vue({el: '#demo',
data: { items: ['a', 'b', 'c', 'd', 'e'] },
mounted () {setTimeout(() => { this.items.splice(2, 0, 'f') // }, 2000);
},
});
</script>
</body>
123456789101112131415161718
在不使用key的情况,vue会进行这样的操作:
分析下整体流程:
- 比较A,A,相同类型的节点,进行patch,但数据相同,不发生dom操作
- 比较B,B,相同类型的节点,进行patch,但数据相同,不发生dom操作
- 比较C,F,相同类型的节点,进行patch,数据不同,发生dom操作
- 比较D,C,相同类型的节点,进行patch,数据不同,发生dom操作
- 比较E,D,相同类型的节点,进行patch,数据不同,发生dom操作
- 循环结束,将E插入到DOM中
一共发生了3次更新,1次插入操作
在使用key的情况:vue会进行这样的操作:
- 比较A,A,相同类型的节点,进行patch,但数据相同,不发生dom操作
- 比较B,B,相同类型的节点,进行patch,但数据相同,不发生dom操作
- 比较C,F,不相同类型的节点
- 比较E、E,相同类型的节点,进行patch,但数据相同,不发生dom操作
- 比较D、D,相同类型的节点,进行patch,但数据相同,不发生dom操作
- 比较C、C,相同类型的节点,进行patch,但数据相同,不发生dom操作
循环结束,将F插入到C之前
- 一共发生了0次更新,1次插入操作
通过上面两个小例子,可见设置key能够大大减少对页面的DOM操作,提高了diff效率
设置key值一定能提高diff效率吗?
其实不然,文档中也明确表示
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM
元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出
建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升
三、原理分析
这里判断是否为同一个key,首先判断的是key值是否相等如果没有设置key,那么key为undefined,这时候undefined是恒等于undefined
patch.js 源码如下
function sameVnode (a, b) {return (a.key === b.key && ((a.tag === b.tag &&a.isComment === b.isComment &&isDef(a.data) === isDef(b.data) &&sameInputType(a, b)) || (isTrue(a.isAsyncPlaceholder) &&a.asyncFactory === b.asyncFactory &&isUndef(b.asyncFactory.error)))
)
}
12345678910111213141516
updateChildren方法中会对新旧vnode进行diff,然后将比对出的结果用来更新真实的DOM
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {...
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {...} else if (isUndef(oldEndVnode)) {...} else if (sameVnode(oldStartVnode, newStartVnode)) {...} else if (sameVnode(oldEndVnode, newEndVnode)) {...} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right...} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left...} else {if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)idxInOld = isDef(newStartVnode.key)? oldKeyToIdx[newStartVnode.key]: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)if (isUndef(idxInOld)) { // New elementcreateElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)} else {vnodeToMove = oldCh[idxInOld]if (sameVnode(vnodeToMove, newStartVnode)) {patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)oldCh[idxInOld] = undefinedcanMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)} else {// same key but different element. treat as new elementcreateElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)}}newStartVnode = newCh[++newStartIdx]}
}
...
}123456789101112131415161718192021222324252627282930313233343536373839
v-for中为何要使用key相关推荐
- 5、如何快速找到多个字典中的公共键(key) 6 如何让字典保持有序 7 如何实现用户的历史记录功能(最多n条)...
5.如何快速找到多个字典中的公共键(key) from random import randint,sample #随机取数 # a = sample("ABCDEF",randi ...
- C++ STL中Map的按Key排序和按Value排序
map是用来存放<key, value>键值对的数据结构,可以很方便快速的根据key查到相应的value.假如存储学生和其成绩(假定不存在重名,当然可以对重名加以区分),我们用map来进行 ...
- oracle v rman status,RMAN 中V$ARCHIVED_LOG 中STATUS 为X 的文件处理
记录一下[@more@] 今天发现RMAN 中V$ARCHIVED_LOG 中STATUS 为"X" 的文件,想起是因为手动删掉错几个日志造成的,通过如下的方法把RMAN 中的记录 ...
- 关于v$process与v$session中process的理解
v$session有个process字段,V$PROCESS有个SPID字段,这两个字段是不是一个意思呢?是不是都代表会话的操作系统进程呢? 官方文档上的解释: SPID VARCHAR2( ...
- [Config]如何利用ConfigurationSettings.AppSettings.GetValues读取配置文件中多个同Key的value...
编写者:郑昀@Ultrapower 默认情况下, string[] strArray = System.Configuration.ConfigurationSettings.AppSettings. ...
- mysql 多个unique key_[MySQL]MySQL 中通过使用UNIQUE KEY 来控制字段值不重复的问题.
语法: UNIQUE KEY `test` (`xref_key`,`xref_dbname`) UNIQUE KEY `xref_key` (`xref_key`,`xref_dbname`) 上述 ...
- oracle设置缓存大小设置多少,【数据库类※从V$DB_CACHE_ADVICE中设置数据缓冲大小※】...
[数据库类※从V$DB_CACHE_ADVICE中设置数据缓冲大小※] Oracle 9i引入了一个新的途径来预测数据缓冲cache中附加数据缓存的所带来的好处的多少.V$DB_CACHE_A ...
- v-for中为什么要有key属性
v-for中为什么要有key属性??? 这是听一个视频中讲的,之前一直不太明白key是干嘛用的 当vue中使用v-for正在更新已经渲染过的元素序列时,它默认用"就地复用"策略,如 ...
- python 按从小到大的顺序组合成一个字典_Python实现字典排序、按照list中字典的某个key排序的方法示例...
本文实例讲述了python实现字典排序.按照list中字典的某个key排序的方法.分享给大家供大家参考,具体如下: 1.给字典按照value按照从大到小排序 排序 dict = {'a':21, 'b ...
- c++ map是有序还是无序的_C++ STL中Map的按Key排序和按Value排序
map是用来存放键值对的数据结构,可以很方便快速的根据key查到相应的value.假如存储学生和其成绩(假定不存在重名,当然可以对重名加以区分),我们用map来进行存储就是个不错的选择. 我们这样定义 ...
最新文章
- Linux下用来获取各种系统信息的C++类
- 如何使用ROS查找rgbdslam代码包框架的输入
- 简单的通讯录程序系统python
- Java编程基础篇第四章
- 机器学习之琐碎知识(代码运行问题)
- 以计算机网络为中介的人际传播,以计算机为中介的人际传播理论范式
- mysql mod如何使用_mysql 操作详解
- C++读写文件总结 .
- 免费的位图字体制作工具Bitmap Font Generator使用教程
- 应用Rational 工具简化基于J2EE的项目(一)
- Harmony OS — PageSliderIndicator滑动页面指示器
- JAVA Excel下载学习
- x3850用uefi安装Linux7,X3850 X5在uEFI模式下无法安装Centos 6.2的解决办法
- Center OS 7
- 然爸读书笔记(2014-4)----史玉柱自述:我的营销心得
- nginx: [error] CreateFile() “D:\nginx-1.21.6/logs/nginx.pid“ failed (2: The system cannot find the
- 大数据生态系统 修仙之道 Hadoop Blog
- 从无秘和知乎看中国社交产品的特点
- [TCL]Tcl语言基礎教程(二)
- MEMS传感器中的小型化_凯利讯半导体
热门文章
- 万年历c语言程序设计免费,C语言程序设计万年历程序
- 计算机毕业设计asp.net小型超市进销存管理系统(源码+系统+mysql数据库+Lw文档)
- 谷歌地球专业版 for mac
- geojson 河流_openlayers之点,线,面(以城市,河流,省份为例,分别对应点线面)...
- html5 div进行田字排列,1——10个数文字在田文字格里的标准写法-20210328120324.docx-原创力文档...
- C语言及程序设计概述
- ibm服务器远程管理口 口令,IBM X系列服务器|IMM2设置远程管理口|默认IP
- 500强企业校园招聘经典面试问题汇编
- 电视和计算机共享视频,电脑中的图片视频一键共享到电视上去看
- 苹果ID登陆第三方有漏洞?硬核!Gartner报告腾讯云数据库增速国内第一;“小米快递”商标注册,这是要入局物流领域?...