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

Vue19-key的原理

news 2026/3/26 14:28:20

一、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

从零推导贝尔曼方程：强化学习中的价值函数与策略优化

1. 强化学习中的价值函数基础 想象你正在玩一个迷宫游戏&#xff0c;每走一步都会消耗体力&#xff0c;找到出口能获得大奖。这时候你会想&#xff1a;**"从当前位置出发&#xff0c;最终能获得多少奖励&#xff1f;"这个问题的答案就是价值函数&#xff08;Value Fu…...

编程新知 2026/3/26 14:27:33

Windows系统焕新优化：Win11Debloat全方位性能提升指南

Windows系统焕新优化&#xff1a;Win11Debloat全方位性能提升指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简化和改…...

编程新知 2026/3/26 14:01:15

大多数开发者还以为2026年AI编码拼的是模型，其实竞争早已转向系统架构

最近刷到Qoder和几个大厂的分享&#xff0c;我瞬间意识到&#xff1a;AI编码的战场已经彻底变天了。 很多人还在卷模型参数、卷上下文长度&#xff0c;以为下一个SOTA模型出来就能让Agent“起飞”。但真实情况是——Stripe每周合并1300个完全由Agent写的PR&#xff0c;Ramp有30…...

编程新知 2026/3/26 13:04:55

vLLM-v0.17.1应用场景：跨境电商多语言商品描述生成系统

vLLM-v0.17.1应用场景&#xff1a;跨境电商多语言商品描述生成系统 1. 跨境电商面临的商品描述挑战 跨境电商企业每天需要为成千上万的商品生成多语言描述&#xff0c;传统人工编写方式面临三大痛点&#xff1a; 人力成本高&#xff1a;每个语种都需要专业翻译人员&#xff…...

编程新知 2026/3/26 12:56:49

Harmonyos应用实例193:圆与方程探索

5. 圆与方程探索 功能简介：输入圆心坐标和半径，绘制圆并显示标准方程，探索圆与直线的位置关系。这是一个功能强大的圆方程计算器，支持通过滑块交互式调整圆心坐标和半径，实时绘制圆形并显示标准方程。用户可选择显示直线，通过调整斜率和截距探索圆与直线的位置关系，系统…...

编程新知 2026/3/26 10:35:22

AI写专著必备：优质工具大盘点，全方位提升专著撰写效率

撰写学术专著时&#xff0c;研究者需要在“内容的深度”和“覆盖的广度”之间找到一个恰当的平衡&#xff0c;而这正是许多人面临的主要难题。从深度出发&#xff0c;专著的核心论点需要具备足够的学术分量&#xff0c;不仅要清楚解答“是什么”&#xff0c;还应该深入探讨“为…...

编程新知 2026/3/26 10:17:15

GEE实战：基于ERA5-Land小时数据批量计算与导出区域月极值气温

1. ERA5-Land数据与GEE平台基础 ERA5-Land是欧洲中期天气预报中心&#xff08;ECMWF&#xff09;推出的高分辨率地表再分析数据集&#xff0c;它提供了从1950年至今的逐小时全球气候数据。与ERA5相比&#xff0c;ERA5-Land的空间分辨率更高&#xff0c;达到0.10.1&#xff08;约…...

编程新知 2026/3/26 10:05:10

长期跳健身操，颈椎会过度屈伸损伤吗

健身爱好者长期跳健身操、跟随节奏做颈部屈伸动作&#xff0c;是运动核心场景&#xff0c;却不知长期如此会让颈 “过度屈伸”&#xff0c;积累屈伸与爆发发力复合损伤。健身操中部分动作要求颈部快速屈伸、左右摆动&#xff0c;爆发性发力导致颈部肌肉与韧带承受瞬间张力&…...

编程新知 2026/3/26 10:03:10

RTX 4090D深度学习镜像效果展示：PyTorch 2.8实测Wan2.2-T2V高清视频生成

RTX 4090D深度学习镜像效果展示&#xff1a;PyTorch 2.8实测Wan2.2-T2V高清视频生成 1. 开箱即用的专业级深度学习环境 当拿到这台搭载RTX 4090D显卡的工作站时&#xff0c;我首先被它的硬件配置震撼了。24GB显存加上120GB内存的组合&#xff0c;在本地运行大型视频生成模型不…...

编程新知 2026/3/26 10:01:10

STM32WU55蓝牙开发避坑指南：从官方例程到8通道肌电信号传输实战

STM32WU55蓝牙开发避坑指南&#xff1a;从官方例程到8通道肌电信号传输实战 当肌电信号采集遇上低功耗蓝牙&#xff0c;工程师们往往面临一个尴尬的平衡&#xff1a;既要满足医疗级数据精度&#xff0c;又要兼顾穿戴设备的续航需求。STM32WU55系列以其双核架构和集成射频模块&a…...

编程新知 2026/3/26 9:12:46