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

Vue19-key的原理

news 2026/2/9 12:08:50

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

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

从零开始打造 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

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/2/7 5:16:05

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51