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

Vue19-key的原理

news 2026/2/8 7:39:06

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/7 4:19:43

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37