v-for中key值的作用

简介: v-for中key值的作用

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;

1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

2.key主要用来做dom diff算法用的,diff算法是同级比较,比较当前标签上的key还有它当前的标签名,如果key和标签名都一样时只是做了一个移动的操作,不会重新创建元素和删除元素。

3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变,Vue不是移动Dom元素来匹配数据项的改变,而是简单复用原来位置的每个元素。如果删除第一个元素,在进行比较时发现标签一样值不一样时,就会复用之前的位置,将新值直接放到该位置,以此类推,最后多出一个就会把最后一个删除掉。

4.尽量不要使用索引值index作key值,一定要用唯一标识的值,如id等。因为若用数组索引index为key,当向数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM的key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据,用索引号index做key值是没有问题的。

5.标签名一样,key一样这时候就会就地复用,如果标签名不一样,key一样不会复用。

目录
打赏
0
0
0
0
4
分享
相关文章
MySQL性能优化指南
【10月更文挑战第16天】MySQL性能优化指南
957 0
Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档
Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档
1243 0
|
11月前
|
API
【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
【8月更文挑战第6天】【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
508 11
NFC(近场通信)技术及其工作原理详解
NFC(近场通信)技术及其工作原理详解
2927 11
Java并发编程:深入解析线程池与Future任务
【7月更文挑战第9天】线程池和Future任务是Java并发编程中非常重要的概念。线程池通过重用线程减少了线程创建和销毁的开销,提高了资源利用率。而Future接口则提供了检查异步任务状态和获取任务结果的能力,使得异步编程更加灵活和强大。掌握这些概念,将有助于我们编写出更高效、更可靠的并发程序。
入行AI最需要的五大技能
作为一名软件工程师,我们应该活到老学到老,时刻与不断发展的框架、标准和范式保持同步。同时,还要能活学活用,在工作中使用最合适的工具,以提高工作效率。随着机器学习在越来越多的应用程序中寻得了一席之地,越来越多的程序员加入AI领域,那么,入行AI领域需要哪些技能呢?
14925 0
未来已来:探索新兴技术在现代世界的应用与挑战
【7月更文挑战第9天】随着科技的不断进步,新兴技术如区块链、物联网(IoT)、虚拟现实(VR)等正在改变我们的生活和工作方式。本文将深入探讨这些技术的发展趋势、应用场景以及面临的挑战,旨在为读者提供一个全面的视角,以理解这些技术如何塑造我们的未来。
135 3
一文带你入门图论和网络分析
本文从图的概念以及历史讲起,并介绍了一些必备的术语,随后引入了networkx库,并以一个航班信息数据集为例,带领读者完成了一些基本分析。
11400 0
[C]C语言中return 0和return 1和return -1
1、返回值int 类型的函数返回: return语句用来结束循环,或返回一个函数的值。 return 0:一般用在主函数结束时,按照程序开发的一般惯例,表示成功完成本函数。
4238 0

热门文章

最新文章

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问