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

Vue19-key的原理

news 文章来源：https://blog.csdn.net/qq_31532983/article/details/139584601 2025/1/12 21:09:11

一、v-for中key的作用

给节点进行一个标识，类似于身份证号。

1-1、需求1：

点击按钮，在<li>的最前面添加一个老刘的信息

<body><div id="root"><h1>人员信息</h1><button @click.once="add">点击添加老王</button><ul><li v-for="(p, index) in persons" ::key="index">{{p.name}}-{{p.age}}<input type="text"></li></ul></div><script>new Vue({el:'#root',data:{persons:[{id:'001', name:'张三', age: 18},{id:'002', name:'李四', age: 20},{id:'003', name:'王五', age: 10}]},methods: {add(){const p = {id:'004', name:'老王', age: 40};// 将数据往数组前面加this.persons.unshift(p);}},})</script></body>

因为，key被vue内部在用。

 

1-2、key="index"的问题：

1、效率不高

2、文本框错乱

 

1-3、遍历列表的时候key的作用

用户操作的都是真实的DOM。

虚拟DOM做对比算法的时候，拿的是两边的key做的对比。 

若是将老王加在王五的后面，则不存在该问题。

所以，当对数据进行了破坏顺序的操作时，key="index"有问题！

张三、李四、王五都是新生成的，不是从左边已经生成的真实DOM中复用的，所以效率低

1-4、解决方式：key="p.id"

1-5、v-for遍历没有key

当v-for遍历没有key的时候，vue自动将遍历时候的索引值（index）作为key了。

二、小结

 

 

相关文章：

Vue19-key的原理

一、v-for中key的作用 给节点进行一个标识&#xff0c;类似于身份证号。 1-1、需求1&#xff1a; 点击按钮&#xff0c;在<li>的最前面添加一个老刘的信息 <body><div id"root"><h1>人员信息</h1><button click.once"add&qu…...

编程日记 2024/6/12 8:49:20

零一科技Yi-VL 6B视觉大模型环境搭建推理

引子 最近看新闻博客说零一科技的Yi-VL-Plus视觉大模型效果很不错&#xff0c;那就想着尝尝鲜。这是第四篇关于视觉大模型的博客。之前有写过一篇零一科技的chat大模型零一科技Yi-34B Chat大模型环境搭建&推理_python部署大模型yi-34b-chat-CSDN博客&#xff0c;感兴趣的童…...

编程日记 2024/6/12 8:47:19

Django面试题

1. 什么是wsgi&#xff1f; WSGI 是 “Web Server Gateway Interface” 的缩写&#xff0c;它是一种用于 Python Web 应用程序和 Web 服务器之间通信的标准接口。它定义了一组规则和约定&#xff0c;使 Web 服务器能够与任何符合 WSGI 规范的 Python Web 应用程序进行交互。 #…...

编程日记 2024/6/12 8:46:17

Perl语言入门学习

文心一言 Perl语言入门学习可以遵循以下步骤和要点&#xff1a; 1. 了解Perl语言 Perl是一种功能丰富的计算机程序语言&#xff0c;运行在超过100种计算机平台上。Perl最初是为文本处理而开发的&#xff0c;但现在用于各种任务&#xff0c;包括系统管理、Web开发、网络编程、…...

编程日记 2024/6/12 8:44:14

Autoformer

A u t o f o r m e r Autoformer Autoformer 摘要 ​ 我们设计了 A u t o f o r m e r Autoformer Autoformer作为一种新型分解架构&#xff0c;带有自相关机制。我们打破了序列分解的预处理惯例&#xff0c;并将其革新为深度模型的基本内部模块。这种设计使 A u t o f o r m…...

编程日记 2024/6/12 8:41:11

uniapp录音播放功能

ui效果如上。 播放就开始倒计时&#xff0c;并且改变播放icon&#xff0c;另外录音则停止上一次录音。 播放按钮&#xff08;三角形&#xff09;是播放功能&#xff0c;两竖是暂停播放功能。 const innerAudioContext wx.createInnerAudioContext();export default{data(){ret…...

编程日记 2024/6/12 8:40:10

✊构建浏览器工作原理知识体系（网络协议篇）

🌻 前言 书接上回～ 系列文章目录： # ✊构建浏览器工作原理知识体系（开篇）# ✊构建浏览器工作原理知识体系（浏览器内核篇）# ✊构建浏览器工作原理知识体系（网络协议篇）✊构建浏览器工作原理知识体系（网页加载超详细全过程篇）为什么你觉得偶尔看浏览器的工作原理，…...

编程日记 2024/6/12 8:38:07

【AI大模型】Transformers大模型库（八）：大模型微调之LoraConfig

目录 一、引言 二、LoraConfig配置参数 2.1 概述 2.2 LoraConfig参数说明 2.3 代码示例 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库&#xff0c;为huggingface上数以万计的预训练大模型提供预测、训练等服务。 &#x1f917; Transformers …...

编程日记 2024/6/12 8:36:05

8-1RT-Thread消息队列

8-1RT-Thread消息队列 消息队列又称队列&#xff0c;是一种常用于线程间通信的数据结构。 消息队列控制块里有两个链表&#xff0c;空闲列表用来挂接空的小几块&#xff0c;另一个链表是用来挂接存有消息的消息框。其中消息链表头指向消息队列当中的第一个消息框&#xff0c;而…...

编程日记 2024/6/12 8:34:04

解除网站IP抓取限制的方法有哪些？

在爬取网站数据时&#xff0c;经常会遇到IP被限制&#xff0c;导致返回的数据无法显示或者直接空白的情况。这时候就需要采取一些方法来解除网站对IP的爬取限制。IP代理是帮助用户绕过网站限制&#xff0c;保持稳定连接&#xff0c;实现数据顺畅爬取的重要解决方案。 1、IP代理…...

编程日记 2024/6/12 8:28:58

“手撕”二叉树的OJ习题

故事的开头&#xff0c;我们先来三道不是oj的开胃菜&#xff0c;练练手感&#xff0c;后面9道都是OJ题。 目录 第一题 第二题 第三题 第四题 第五题 第六题 第七题 第八题 第九题 第十题 第十一题 第一题 二叉树前序非递归遍历实现 。 首先我们需要一个栈来存放二…...

编程日记 2024/6/12 8:27:57

Linux Mint 21.3简介

Linux Mint 21.3是一个更新版本&#xff0c;其中包含了许多新特性和改进。以下是一些主要更新内容&#xff1a; 1. Cinnamon 6.0桌面环境&#xff1a;Linux Mint 21.3采用了最新的Cinnamon 6.0桌面环境&#xff0c;带来了新的功能和改进&#xff0c;例如支持Wayland会话&#…...

编程日记 2024/6/12 8:25:55

C++11 面试题整理

C面试题 1 菱形继承 2 多态 多态实现原理&#xff1a; 静态多态 动态多态 静态多态&#xff1a; 依赖函数重载&#xff0c;编译期确定。 函数重载&#xff1a;允许在同一作用于内声明多个功能类似的同名函数&#xff0c;函数列表不同。注意&#xff1a;不能仅通过返回值类型…...

编程日记 2024/6/12 8:24:54

【智能制造-2】焊缝跟踪

焊缝跟踪&#xff1f; 焊缝跟踪&#xff1a;指在焊接位置前方安装光学传感器进行数据采集&#xff0c;然后传输到焊接机器人&#xff0c;进行自适应的各种模糊控制算法校正焊接机器人或专机的轨迹&#xff0c;实现自适应控制&#xff0c;达到实时的焊缝跟踪。 焊缝跟踪的方法…...

编程日记 2024/6/12 8:22:51

优思学院｜用ChatGPT快速完成数据分析图表【柏累托图法】

数据分析是很多行业的人不可少的一部分&#xff0c;尤其是质量工程师更是日常的工作。然而&#xff0c;随着科技的进步&#xff0c;人工智能&#xff08;AI&#xff09;将逐渐承担起数据计算的工作&#xff0c;这意味着未来的质量工程师需要具备的不仅仅是计算能力&#xff0c;…...

编程日记 2024/6/12 8:20:49

[晕事]今天做了件晕事37 extern “C“ 被认为了是外部函数

最近看到一个函数声明是 extern “C" void _dump(); 这里的声明是要告诉编译器&#xff0c;这个_dump是C语言的符号&#xff0c;没有经过mangle过的。但是这个关键字可能让人混淆是外部函数。因为这个关键字可以声明外部函数。这也算是一词多用的一个普遍问题。关键的关键…...

编程日记 2024/6/12 8:18:47

问题：关于醋酸钠的结构，下列说法错误的是（） #媒体#媒体

问题&#xff1a;关于醋酸钠的结构&#xff0c;下列说法错误的是&#xff08;&#xff09; A&#xff0e;有极性键 B&#xff0e;有非极性键 C&#xff0e;是极性分子 D&#xff0e;是离子晶体 参考答案如图所示...

编程日记 2024/6/12 8:17:46

网络安全（补充）

同步包风暴&#xff08;SYN Flood&#xff09;攻击者假造源网址发送多个同步数据包&#xff08;SYN Packet&#xff09;给服务器&#xff0c;服务器因无法收到确认数据包&#xff08;ACK Packet&#xff09;&#xff0c;使TCP/IP协议三次握手无法顺利完成&#xff0c;因而无法建…...

编程日记 2024/6/12 8:16:45

Redis集群（3）

集群扩容 节点配置和启动 我们要加入两个节点&#xff0c;主节点端口为6903&#xff0c;从节点端口为6933。配置与6900节点类似&#xff0c;不再赘述。启动这两个节点&#xff1a; ./redis-server ../conf/cluster_m_6903.conf ./redis-server ../conf/cluster_s_6933.conf加…...

编程日记 2024/6/12 8:15:44

防止Selenium被检测 Google Chrome 125

背景 最近在使用selenium自动播放学习课程&#xff0c;相信大家也有一些类似的使用场景。 能自动化的事情&#xff0c;绝不自己干。 为防止被检测是机器人做题&#xff0c;刷视频&#xff0c;需要做一些小调整。 先来看作为服务方维护者&#xff0c;是如何检测是Selenium打…...

编程日记 2024/6/12 8:14:43

LeetCode 算法：螺旋矩阵c++

原题链接&#x1f517;&#xff1a;螺旋矩阵 难度&#xff1a;中等⭐️⭐️ 题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&…...

编程日记 2024/6/12 8:13:40

【全开源】医护上门系统小程序APP公众号h5源码

医护上门系统&#xff1a;健康守护&#xff0c;就在您身边 &#x1f6aa;引言&#xff1a;开启全新的医护模式 在快节奏的现代生活中&#xff0c;健康问题往往成为我们关注的焦点。而“医护上门系统”正是为了满足这一需求&#xff0c;将专业的医疗服务送到您的家中。这一创新…...

编程日记 2024/6/12 8:12:40

结构体＜C语言＞

导言 结构体是C语言中的一种自定义类型&#xff0c;它的值&#xff08;成员变量&#xff09;可以是多个&#xff0c;且这些值可以为不同类型&#xff0c;这也是和数组的主要区别&#xff0c;下面将介绍它的一些基本用法&#xff0c;包括&#xff1a;结构体的创建、结构体变量的…...

编程日记 2024/6/12 8:06:30

点云分割报告整理（未完成版-每天写一点）

体积占用网格表示对点进行体素化&#xff0c;然后使用3d卷积神经网络来学习体素级语义。由于点云的稀疏性&#xff0c;体素化效率低&#xff0c;为避免较高的计算成本而忽略了细节。此外&#xff0c;由于同一体素内的所有点都被赋予了相同的语义标签&#xff0c;因此精度受到限…...

编程日记 2024/6/12 8:05:29

python基础 002 - 1 基础语法

1 标识符&#xff08;identifier&#xff09;&#xff0c;识别码&#xff0c;表明身份 身份证&#xff0c;ID 定义&#xff1a;在编程语言中标识符就是程序员自己规定的具有特定含义的词&#xff0c;比如类名称、属性名称、变量名等&#xff0c; 在Python 中&#xff0c;pyt…...

编程日记 2024/6/12 8:02:26

浅谈Web开发的三大主流框架：Angular、React和Vue.js

在现代Web开发领域&#xff0c;Angular、React和Vue.js作为三大主流前端框架&#xff0c;各自拥有独特的特点和优势&#xff0c;为开发者提供丰富的选择。让我们更深入地了解这三大框架&#xff0c;并通过一些小型样例来展示它们的特性。 Angular Angular是一个完整的前端框架…...

编程日记 2024/6/12 8:00:22

使用net.sf.mpxj读取project的.mpp文件

1、导入.mpp文件 public void importMppFile(String updateType, MultipartFile multipartFile) {try (InputStream inputStream multipartFile.getInputStream()) {// 读取文件的组件MPPReader mppReader new MPPReader();// 注意&#xff0c;如果在这一步出现了读取异常&a…...

编程日记 2024/6/12 7:59:22

ubuntu 22.04 升级到24.04

step1. sudo apt update sudo apt upgrade sudo apt dist-upgrade step2. sudo apt autoremove step3. sudo apt install update-manager-core step4. sudo vim /etc/update-manager/release-upgrades 将 Prompt 设置为 lts&#xff1a; Promptlts 保存并退出 step5. sudo do-r…...

编程日记 2024/6/12 7:56:18

FreeRTOS学习笔记-基于stm32（14）内存管理

一、FreeRTOS 内存管理简介 FreeRTOS有两种方法来创建任务&#xff0c;队列&#xff0c;信号量等&#xff0c;一种动态一种静态。静态方法需要手动定义任务堆栈。使用动态内存管理的时候 FreeRTOS 内核在创建任务、队列、信号量的时候会动态的申请 RAM。 我们在移植FreeRTOS时可…...

编程日记 2024/6/12 7:55:13

关于Lambert W函数

来源&#xff1a;R. M. Corless, G. H. Gonnet, D. E. G. Hare, D. J. Jeffrey, and D. E. Knuth, “On Lambert’s W function,” Adv. Comput. Math., vol. 5, pp. 329–359, May 1996, doi: 10.1007/BF02124750. 摘要 Lambert W函数被定义为函数 w ↦ w e w w \mapsto we^…...

编程日记 2024/6/12 7:54:12

app软件制作网站/搜索引擎营销简称seo

【实例简介】更新至2018-05-30 增加不支持IE8的页面提示 修复页面链接和表单提交默认在新窗口中打开的问题 更新suggest插件&#xff0c;修复错位问题 升级bootstrap版本到3.3.6版本 升级layer到2.1版本 升级echarts到2.2.7版本 升级webuploader到0.1.5版本 修复网络条件不好情…...

编程日记 2025/1/12 17:39:51

免费微网站系统源码/爱站网长尾关键词搜索

早晨起床时间&#xff1a;6:30 晚上休息时间&#xff1a;12:49 全天处理事件&#xff1a;1.上班。 处事经验总结&#xff1a;暂无。 人生感悟&#xff1a;暂无。 其它&#xff1a;今天我们部门聚餐&#xff0c;又学到很多东西。希望自己在今年能够克服自身的一些缺点&#xff0…...

编程日记 2025/1/12 12:54:54

昆山做网站找文博/新东方雅思培训价目表

在这个项目上&#xff0c;也就是前端的工作居多。某日&#xff0c;一友人因把文件上传到 Dropbox 而引发众怒。同时&#xff0c;百度网盘也越来越不好用了。我随意吐槽之。于是乎&#xff0c;就有了这个项目。 某个周六深夜&#xff0c;写小程序已闷死&#xff0c;突然想起答应…...

编程日记 2025/1/12 11:29:37

安平县哪里做网站/日本积分榜最新排名

最近发现有些读者通过将我的教程进行二次出售来获取暴利&#xff0c;我在此对其表示强烈的谴责 朋友们, 如需转载请标明出处&#xff1a;www.captainbed.net 总目录&#xff08;请务必点击总目录从前言看起&#xff0c;这样才能充分理解本篇文章&#xff09; 什么是人工智能&am…...

编程日记 2025/1/12 9:52:18

沈阳做招聘网站/优化网站关键词排名软件

产品开发的重要环节 产品设计是指从确定产品设计任务书起到确定产品结构为止的一系列技术工作的准备和管理&#xff0c;是产品开发的重要环节&#xff0c;是产品生产过程的开始&#xff0c;必须严格遵循三段设计程序。 1.设计依据&#xff08;根据具体情况可以包括一个或数个…...

编程日记 2025/1/12 3:27:09

个人作品集网站模板免费下载/荨麻疹怎么治疗能除根

https://blog.csdn.net/github_37512301/article/details/75675054 一、关联模型在关系型数据库中&#xff0c;表之间有一对一、一对多、多对多的关系。在 TP5 中&#xff0c;实现了ORM (Object Relational Mapping) 的思想&#xff0c;通过在模型中建立模型间的关联&#xff0…...

编程日记 2025/1/12 2:54:43