v-for循环为什么要绑定key值

简介: v-for循环为什么要绑定key值

1.vue在渲染的时候,会先把新Dom和旧dom进行对比,如果结构一致,则vue会复用旧的dom这个时候可能造成数据渲染异常


2.使用key可以给dom添加一个标识符让vue强制更新dom比如有一个列表有li1到li4我们需要在中间插入一个li3,li1和li2不会从新渲染而li3 li4 li5都会从新渲染,因为在不使用key或者列表index作为key的时候每个元素对应的位置关系都是index直接导致我们插入的原数以及到后面的全部元素对应的位置都发生了变更,所以全部都会执行更新操作,而这使用唯一key的情况下,每个元素对应的位置关系就是key。


总结:Key的作用主要是为了更高效的更新虚拟dom,


还有他可以非常精确,会找到相同节点,因此patch过程会非常高效view在patch过程中会判断两个节点是不是相同节点时key是一个必要条件,比如渲染列表时如果不写key你也在比较的时候就可能会导致频繁更新元素,使整个过程比较低效,影响性能应该避免使用数组下标作为key因为key值不是唯一的话,可能会导致上面图中表示的bug使vue无法区分它,它还有比如在使用相同标签元素过度切换的时候就会导致只替换其内部属性而不会触发过渡效果,从源码里可以知道没有判断两个节点是否相同,是主要判断两者的元素类型和key等,如果不设置key就可能永远认为这两个是相同节点,只能去做更新操作,就造成大量不必要的dom更新操作,明显是不可取的,为什么不建议index索引作为key使用index作为key和没写基本上没区别,因为不管数组的顺序怎么颠倒index都是012这样排列,导致vue会复印错误的就此节点做很多额外的工作


目录
相关文章
|
存储 弹性计算 Linux
阿里云账号注册、完成实名认证、试用云服务器和购买云服务器流程参考
本文为大家介绍新手用户从注册阿里云账号,完成实名认证,然后试用云服务器和购买云服务器的主要流程,适合初次购买和试用阿里云服务器的新手用户参考。
阿里云账号注册、完成实名认证、试用云服务器和购买云服务器流程参考
|
11月前
|
存储 消息中间件 大数据
大数据-70 Kafka 高级特性 物理存储 日志存储 日志清理: 日志删除与日志压缩
大数据-70 Kafka 高级特性 物理存储 日志存储 日志清理: 日志删除与日志压缩
148 1
|
Kubernetes Linux KVM
在Linux中,有哪些虚拟化技术?
在Linux中,有哪些虚拟化技术?
|
Java 应用服务中间件 Linux
Linux(CentOS7)设置Tomcat为开机启动项
Linux(CentOS7)设置Tomcat为开机启动项
374 0
|
Java
failed to solve with frontend dockerfile.v0: failed to create LLB definition: unexpected status code
failed to solve with frontend dockerfile.v0: failed to create LLB definition: unexpected status code
297 0
|
安全 关系型数据库 Linux
centos7_安装mysql8(局域网访问navicat连接)
centos7_安装mysql8(局域网访问navicat连接)
308 1
|
Oracle 网络协议 关系型数据库
异地使用PLSQL远程连接访问Oracle数据库【内网穿透】
异地使用PLSQL远程连接访问Oracle数据库【内网穿透】
173 1
Inno Setup磁盘跨越必须启用,因为程序大于21000000000
Inno Setup磁盘跨越必须启用,因为程序大于21000000000
|
Kubernetes Cloud Native Apache
[AIGC] 主流工作流引擎对比与适用场景介绍
[AIGC] 主流工作流引擎对比与适用场景介绍
592 0
|
消息中间件 Oracle 关系型数据库
实时计算 Flink版操作报错合集之在连接Oracle 19c时报错如何解决
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
256 0