当前位置: 首页 > news >正文

v-for中key的原理以及用法

        在 Vue.js 中,v-for 指令用于基于源数据多次渲染元素或模板块。当使用 v-for 渲染列表时,为每个列表项提供一个唯一的 key 属性是非常重要的。key 的主要作用是帮助 Vue 跟踪每个节点的身份,从而重用和重新排序现有元素。

先来张原理图:

工作原理

1. 身份跟踪:当 Vue 渲染列表元素时,key 帮助 Vue 识别哪些项被修改、添加或删除。这样,Vue 可以最小化 DOM 操作,提高渲染效率。
2. 重用元素:在动态更新列表时,如果元素的 key 没有改变,Vue 会复用原来的元素而不是创建一个新的元素。这意味着如果数据项的顺序被改变,Vue 将只是移动 DOM 元素而不是销毁和重新创建它们。

举个栗子

先创建一个list

const list = [{id: 1,name: 'test1'},{id: 2,name: 'test2'},{id: 3,name: 'test3'}
]

然后我们在id为1的对象后边插入一条数据

const list = [{id: 1,name: 'test1'},{id: 4,name: '我是插队的数据'},{id: 2,name: 'test2'},{id: 3,name: 'test3'}
]

如果我们在模板中使用index作为key的值

<div v-for="(item,index) in list :key="index">{{item.name}}</div>

 对比前后两次数据如下

之前的数据                               之后的数据
 
key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的数据
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                                 key: 3  index: 3 name: test3

可以发现除了第一条数据可以复用以外,另外三条数据都需要重新渲染,因为key值发生了变化;
这时候就可以体现出了一个效率问题,只插入了一条数据,却要重新渲染三条数据;

所以我们需要想办法让数组中不会变化的数据的key值也不变,所以不能通过index来设置key值,应该设置一个唯一的id来标识数据的唯一性

<div v-for="item in list :key="item.id">{{item.name}}</div>

我们修改之后再来对比一下渲染的效率: 

之前的数据                                       之后的数据
 
key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1
key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插队的数据
key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2
                                                         key: 3  id: 3 index: 3  name: test3 

对比可以发现,只有一条数据发生了变化,因为其他数据的id都没变,所以key值也没变,所以只需要渲染这一条新的数据即可。

总结

key 的使用是 Vue 中管理动态列表非常重要的一个方面,它确保了列表渲染的性能和正确性。在使用 v-for 时,总是推荐为每个项指定一个唯一的 key 值,通常是每个项的唯一标识符,如 ID 或者其他唯一字段。这样可以帮助 Vue 更有效地更新和管理 DOM。

相关文章:

v-for中key的原理以及用法

在 Vue.js 中&#xff0c;v-for 指令用于基于源数据多次渲染元素或模板块。当使用 v-for 渲染列表时&#xff0c;为每个列表项提供一个唯一的 key 属性是非常重要的。key 的主要作用是帮助 Vue 跟踪每个节点的身份&#xff0c;从而重用和重新排序现有元素。 先来张原理图&#…...

基于强化学习的目标跟踪论文合集

文章目录 2020UAV Maneuvering Target Tracking in Uncertain Environments Based on Deep Reinforcement Learning and Meta-LearningUAV Target Tracking in Urban Environments Using Deep Reinforcement Learning 2021Research on Vehicle Dispatch Problem Based on Kuhn-…...

高质量AIGC/ChatGPT/大模型资料分享

2023年要说科技圈什么最火爆&#xff0c;一定是ChatGPT、AIGC&#xff08;人工智能生成内容&#xff09;和大型语言模型。这些技术前沿如同科技世界的新潮流&#xff0c;巨浪拍岸&#xff0c;引发各界关注。ChatGPT的互动性和逼真度让人们瞠目&#xff0c;它能与用户展开流畅对…...

使用Python进行Socket接口测试

大家好&#xff0c;在现代软件开发中&#xff0c;网络通信是不可或缺的一部分。无论是传输数据、获取信息还是实现实时通讯&#xff0c;都离不开可靠的网络连接和有效的数据交换机制。而在网络编程的基础中&#xff0c;Socket&#xff08;套接字&#xff09;技术扮演了重要角色…...

C++编程逻辑讲解step by step:存折和信用卡类。

题目 存折和信用卡类&#xff0c;信用卡是一种存折&#xff0c;可以透支&#xff0c;可以存款。 代码 #include<iostream> #include<string> using namespace std; class passbook {public: passbook(string nam,int n,float m) {namenam; numn; balancem; } vo…...

为什么说BIM在机电安装行业是刚需?3D开发工具HOOPS如何促进BIM发展?

在建筑行业中&#xff0c;机电安装是一个复杂且精细的工程领域&#xff0c;它涉及到电气、管道、通风和控制系统等多个方面。随着建筑项目规模的不断扩大和复杂性的增加&#xff0c;传统的二维设计方法已经难以满足现代建筑的需求。正是在这种背景下&#xff0c;BIM技术应运而生…...

SQLite:一个极简使用教程

SQLite是一个轻量级的、文件系统基础的数据库&#xff0c;它被设计为配置简单、易于部署。SQLite数据库存储在一个单一的磁盘文件中&#xff0c;这意味着数据库的创建和维护都非常简单。 1. SQLite特点 轻量级&#xff1a;SQLite不需要一个独立的服务器进程。它是一个嵌入式SQ…...

酒水公司网站品牌建设宣传如何进行

红酒、白酒、啤酒、米酒、精酿啤酒等各种各样的酒水类型和从业公司数量比较多&#xff0c;部分品牌有收藏价值/价格高但销量相对较低&#xff0c;也有部分属于亲民&#xff0c;价格低但销量高&#xff0c;国内外受众广&#xff0c;人员标签不同生意拓展面自然也不同。 无论如何…...

【高级篇】InnoDB引擎深入:核心机制与实战优化(十五)

引言 在探索了MySQL集群与分布式技术之后,我们进入了数据库引擎的核心地带——InnoDB。作为MySQL的默认存储引擎,InnoDB凭借其对事务的支持、行级锁定、高效的恢复机制以及复杂的内存管理,成为众多应用场景的首选。本章,我们将深入InnoDB的内部机制,透彻理解锁管理、事务…...

打造安全的Linux环境:关键配置指南

打造安全的Linux环境&#xff1a;关键配置指南 Linux作为一款开源的操作系统&#xff0c;因其稳定性、灵活性和安全性而受到广泛欢迎。然而&#xff0c;即使Linux系统本身设计得相对安全&#xff0c;不正确的配置或管理不善也可能导致安全风险。本文将指导你如何通过关键配置来…...

什么是WABF验证?

今年的618电商购物节已经落下帷幕&#xff0c;在此期间&#xff0c;各大电商平台都普遍迎来了用户访问量、优惠券领取量和交易量的显著增长。在这一时期&#xff0c;业务安全成为电商平台关注的焦点。验证码作为一种常见的业务安全工具&#xff0c;能够有效应对业务安全问题。然…...

CSS3 分页

CSS3 分页 分页是网页设计中常见的一种布局方式&#xff0c;它允许将内容分布在多个页面中&#xff0c;从而提高用户体验和网站的可管理性。CSS3 提供了多种灵活的方式来设计分页&#xff0c;使得开发者能够创建既美观又实用的分页导航。本文将详细介绍如何使用 CSS3 来创建和…...

QWebChannel实现与JS的交互

QWebChannel实现与JS的交互 在利用Qt框架的QWebEngineView进行嵌入浏览器开发时&#xff0c;可以很方便的通过 QWebChannel实现与js的交互&#xff0c;本节内容简单讲解js与Qt应用程序相互发送消息。 最近做项目遇到了这个问题&#xff0c;发现网上的例子不全&#xff0c;很多…...

【漏洞复现】电信网关配置管理系统——命令执行

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 电信网关配置管理系统是一个用于管理和配置电信网关设备的软件系…...

排序算法。

快速排序&#xff1a;QuickSort 选标准值&#xff0c;将比标准值小的放在其左侧&#xff0c;将比标准值大的放在其右侧&#xff0c;左右两部分分别重复以上操作 1.挖坑填补法 拆东墙补西墙 先把第一个数拿出来用temp储存 然后从最后面遍历 找到比temp小的放到第一个位置 然后…...

告别 “屎山” 代码,务必掌握这14 个 SpringBoot 优化小妙招

插&#xff1a; AI时代&#xff0c;程序员或多或少要了解些人工智能&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家(前言 – 人工智能教程 ) 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家…...

测量无人船作业流程是怎样的?

在一些特殊水域测量作业中&#xff0c;使用有人船进行测量时受阻较多&#xff0c;而采用无人测量船则效率就非常高了&#xff0c;它是解决复杂水域测量问题最直接最有效的方式。那么&#xff0c;测量无人船作业流程是怎样的&#xff1f;下面就让小编来为大家简单介绍一下&#…...

四川赤橙宏海商务信息咨询有限公司抖音开店靠谱吗?

在数字化浪潮席卷全球的今天&#xff0c;电商行业正以前所未有的速度发展。而在这个大潮中&#xff0c;四川赤橙宏海商务信息咨询有限公司凭借其专业的团队和前瞻性的战略眼光&#xff0c;专注于抖音电商服务&#xff0c;为广大商家提供了一站式解决方案&#xff0c;成为了行业…...

解决ssh: connect to host IP port 22: Connection timed out报错(scp传文件指定端口)

错误消息 ssh: connect to host IP port 22: Connection timed out 指出 SSH 客户端尝试连接到指定的 IP 地址和端口号&#xff08;默认 SSH 端口是 22&#xff09;&#xff0c;但是连接超时了。这意味着客户端没有在预定时间内收到来自服务器的响应。 可能的原因 SSH 服务未…...

【笔记】echarts图表的缩放和鼠标滚动冲突的处理解决方案

解决方案不是很好&#xff0c;来源于github的issue&#xff0c;官方提供了&#xff0c;组合键触发缩放的功能。 https://github.com/apache/echarts/issues/5769 https://echarts.apache.org/zh/option.html#dataZoom-inside.zoomOnMouseWheel dataZoom-inside.zoomOnMouseWhe…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...