v-for中的key是什么作用

news/2024/5/19 17:30:27

在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。
这个key属性有什么作用呢?我们先来看一下官方的解释:

key属性主要用在Vue的虚拟DOM算法,在新Inodes对比时辨识VNodes;
如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;
而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素;

认识VNode

我们先来解释一下VNode的概念:
因为目前我们还没有比较完整的学习组件的概念,所以目前我们先理解HTML元素创建出来的VNode;
VNode的全称是VirtualNode,也就是虚拟节点;
事实上,无论是组件还是元素,它们最终在Vue中表示出来的都是一个个VNode;
VNode的本质是一个JavaScript的对象;
图例:
在这里插入图片描述

那么Vue中对于列表的更新究竟是如何操作的呢?
Vue事实上会对于有key和没有key会调用两个不同的方法;
有key,那么就使用 patchKeyedChildren方法;
没有key,那么久使用 patchUnkeyedChildren方法;

Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作:
在没有key的时候我们的效率是非常低效的;
在进行插入或者重置顺序的时候,保持相同的key可以让diff算法更加的高效;
v-for绑定key属性,key要使用唯一值,尽量避免使用index,index只能保持语法正确,并不能提高性能

<ul><li v-for="item in letters" :key="item">{{item}}</li></ul>

http://www.mrgr.cn/p/86335886

相关文章

【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画

最近,群里在讨论一个很有意思的线条动画效果,效果大致如下:简单而言,就是线条沿着不规则路径的行进动画,其中的线条动画可以理解为是特殊的光效。 本文,我们将一起探索,看看在不使用 JavaScript/Canvas 的基础上,使用纯 CSS/SVG 的方式,我们可以如何大致的还原上述的线…

mysql查询语句数组下标截取

#["广东省","汕头市","龙湖区"]SELECT a.`register_address` AS 工商地址,a.`dismantle_address`, REPLACE (dismantle_address->$[0],",) AS 省,REPLACE (dismantle_address->$[1],",) AS 市,REPLACE (dismantle_address->$…

IR-CUT驱动电路

本文介绍IR-CUT驱动电路。 IR-CUT Filter是很多相机镜头配置的滤光片&#xff0c;通过相应的驱动电路&#xff08;可以简单理解为驱动一个电磁铁&#xff09;&#xff0c;可以在有无IR-CUT Filter之间进行切换&#xff0c;本文基于TI电机驱动芯片DRV8838设计IR-CUT驱动电路。 …

[每日AI·0506]巴菲特谈 AI,李飞飞创业,苹果或将推出 AI 功能,ChatGPT 版搜索引擎

AI 资讯 苹果或将推出 AI 功能&#xff0c;随 iPhone 发布2024 年巴菲特股东大会&#xff0c;巴菲特将 AI 类比为核技术 巴菲特股东大会 5 万字实录消息称 OpenAI 将于 5 月 9 日发布 ChatGPT 版搜索引擎路透社消息&#xff0c;斯坦福大学 AI 领军人物李飞飞打造“空间智能”创…

open-webui+ollama本地部署Llama3

前言 Meta Llama 3 是由 Meta 公司发布的下一代大型语言模型&#xff0c;拥有 80 亿和 700 亿参数两种版本&#xff0c;号称是最强大的开源语言模型。它在多个基准测试中超越了谷歌的 Gemma 7B 和 Mistral 7B Instruct 模型。 安装 1.gpt4all https://github.com/nomic-ai/…

自学IT成为许多人提升自我

在数字化时代浪潮中&#xff0c;自学IT成为许多人提升自我、拥抱未来的重要途径。通过网络平台、在线课程、开源项目等丰富资源&#xff0c;学习者能灵活安排时间&#xff0c;深入掌握编程语言、软件开发、数据分析、人工智能等多个领域知识。自学不仅培养了解决问题的能力&…

JavaScript 流程控制语句详解:if语句、switch语句、while循环、for循环等

JavaScript,作为一种广泛使用的编程语言,它的流程控制语句是构建逻辑和实现功能的基础。流程控制语句包括条件语句、循环语句和转向语句,它们是编程中不可或缺的部分。 接下来,我们将一一解析这些语句,带你走进JavaScript的世界。 一、什么是流程控制语句 流程控制语句是用…

AI大模型探索之路-训练篇16:大语言模型预训练-微调技术之LoRA

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…

PMP培训一般要多久?

考过PMP很久了&#xff0c;学习时长还是记得很清楚的。因为有一部分的项目经验&#xff0c;报了威班PMP的培训&#xff0c;看了宣传是50天通过PMP&#xff0c;但是我仅仅用了一个月出头就搞定了&#xff0c;算下来才四十天不到就已经学完在准备冲刺参加考试了&#xff0c;最后5…

锅炉轴承界的“耐热冠军”:江苏鲁岳耐高温300度自润滑轴承!

耐高温300度锅炉轴承&#xff0c;江苏鲁岳自润滑技术领先行业&#xff01;300度高温轻松应对&#xff0c;江苏鲁岳锅炉轴承自润滑技术引领潮流&#xff01;耐磨耐温套-钢厂托辊用无油自润滑钢套-江苏鲁岳耐高温轴承。 在工业生产的大潮中&#xff0c;高温环境始终如一地考验着设…

15个很有趣的开源项目

开源的世界每天都会有各种惊喜,下面是我们整理的15个有趣的开源项目,希望当中有您喜欢的。1. 视搭 Site: https://github.com/tnfe/shida 《视搭》是一个 视频可视化 搭建项目。您可以通过简单的拖拽方式快速生产一个短视频,使用方式就像易企秀或MAKA等 h5 搭建工具一样的简…

不锈钢杆端关节轴承:免维护领域的领航者,润滑技术掀起新革命

不锈钢杆端关节轴承是一种特殊的轴承类型&#xff0c;其主要由内圈和外圈组成&#xff0c;内圈具有外球面&#xff0c;而外圈具有内球面。这种设计使得轴承能够承受较大的径向和轴向负荷&#xff0c;并允许轴承在一定角度范围内进行倾斜运动。 不锈钢杆端关节轴承的主要特点包…

vsCode配置自动补全css兼容性代码 ,解决 Autoprefixer 3.0无效

问题:使用vsCode编辑器,配置Autoprefixer3.0无法实现自动补全兼容性代码 解决方法:将Autoprefixer3.0更换到2.0版本,再将网上冲浪的结果整理了一番,终于找到了解决办法,并进行以下步骤进行验证。 解决步骤:1、首先搭建node.js环境2、打开vsCode搜索Autoprofixer,一般默…

快速查询自己哔哩哔哩账号的注册时间

登录自己哔哩哔哩 访问下面地址 https://member.bilibili.com/x2/creative/h5/calendar/event?ts=0 打开后,在网页中查找“jointime”,join time,“加入时间”, 如下图,“jointime”冒号后面的一串数字,是时间戳,时间戳转换 把这串数字复制下来,在网上找一个“unix时间…

vue跟jQuery中的事件冒泡、事件捕获、事件委托(事件代理)

1、事件捕获、事件冒泡 在JS中&#xff0c;我们管事件发生的顺序叫“事件流” 标准的事件流&#xff1a;当dom触发了事件后&#xff0c;会先通过事件传播捕获到目标元素&#xff0c;然后目标节点通过事件传播实现事件冒泡 事件传播&#xff1a;无论是捕获还是冒泡&#xff0…

02、Kafaka 简介

02、Kafka 简介 1、 Kafka 简介 Apache Kafka 是一个分布式的发布-订阅消息系统&#xff0c;最初由 LinkedIn 公司开发&#xff0c;并在 2010 年贡献给了 Apache 软件基金会&#xff0c;成为一个顶级开源项目。Kafka 设计之初是为了满足高吞吐量、可扩展性、持久性、容错性以…

Jlink版本过低无法识别芯片

使用Jlinkv6.10 无法识别新的芯片STM32G474解决方法 选择芯片对应的内核Cortexm-4就可以下载代码了本文来自博客园,作者:zhugedz,转载请注明原文链接:https://www.cnblogs.com/zhugedz/p/18176976

《安富莱嵌入式周报》第336期:开源计算器,交流欧姆表,高性能开源BLDC控制器,Matlab2024a,操作系统漏洞排名,微软开源MS-DOS V4.0

周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 本周更新一期视频教程: BSP视频教程第30期:UDS ISO14229统一诊断服务CAN总线专题,常用诊断执行流程精讲,干货分享,图文并茂 https://www.armbbs.cn/forum.…

JS实现图表日期分类按色显示

预想要达成的效果图: 关键步聚: js代码如下function(){ var date = new Date(this);if(date.getDay()==0||date.getDay()==6){return "<font color=red>"+date.getDate()+"</font>"}else{return date.getDate();} }注:若 iOS 手机预览时显示 …

Go的安装与配置

安装 https://go.dev/dl/ 以Windows上安装为例:下一步下一步,记住安装位置 安装完成后 win + r cmd 键入go version检查是否安装成功配置Path win + r sysdm.cpl 高级 -> 环境变量 -> 系统环境变量 编辑Path确定 新建GOPATH确定确定 在GOPATH路径下新建3个文件夹