Vue19-key的原理
一、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的作用 给节点进行一个标识,类似于身份证号。 1-1、需求1: 点击按钮,在<li>的最前面添加一个老刘的信息 <body><div id"root"><h1>人员信息</h1><button click.once"add&qu…...
零一科技Yi-VL 6B视觉大模型环境搭建推理
引子 最近看新闻博客说零一科技的Yi-VL-Plus视觉大模型效果很不错,那就想着尝尝鲜。这是第四篇关于视觉大模型的博客。之前有写过一篇零一科技的chat大模型零一科技Yi-34B Chat大模型环境搭建&推理_python部署大模型yi-34b-chat-CSDN博客,感兴趣的童…...
Django面试题
1. 什么是wsgi? WSGI 是 “Web Server Gateway Interface” 的缩写,它是一种用于 Python Web 应用程序和 Web 服务器之间通信的标准接口。它定义了一组规则和约定,使 Web 服务器能够与任何符合 WSGI 规范的 Python Web 应用程序进行交互。 #…...
Perl语言入门学习
文心一言 Perl语言入门学习可以遵循以下步骤和要点: 1. 了解Perl语言 Perl是一种功能丰富的计算机程序语言,运行在超过100种计算机平台上。Perl最初是为文本处理而开发的,但现在用于各种任务,包括系统管理、Web开发、网络编程、…...
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作为一种新型分解架构,带有自相关机制。我们打破了序列分解的预处理惯例,并将其革新为深度模型的基本内部模块。这种设计使 A u t o f o r m…...
uniapp录音播放功能
ui效果如上。 播放就开始倒计时,并且改变播放icon,另外录音则停止上一次录音。 播放按钮(三角形)是播放功能,两竖是暂停播放功能。 const innerAudioContext wx.createInnerAudioContext();export default{data(){ret…...
✊构建浏览器工作原理知识体系(网络协议篇)
🌻 前言 书接上回~ 系列文章目录: # ✊构建浏览器工作原理知识体系(开篇)# ✊构建浏览器工作原理知识体系(浏览器内核篇)# ✊构建浏览器工作原理知识体系(网络协议篇)✊构建浏览器工作原理知识体系(网页加载超详细全过程篇)为什么你觉得偶尔看浏览器的工作原理,…...
【AI大模型】Transformers大模型库(八):大模型微调之LoraConfig
目录 一、引言 二、LoraConfig配置参数 2.1 概述 2.2 LoraConfig参数说明 2.3 代码示例 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库,为huggingface上数以万计的预训练大模型提供预测、训练等服务。 🤗 Transformers …...
8-1RT-Thread消息队列
8-1RT-Thread消息队列 消息队列又称队列,是一种常用于线程间通信的数据结构。 消息队列控制块里有两个链表,空闲列表用来挂接空的小几块,另一个链表是用来挂接存有消息的消息框。其中消息链表头指向消息队列当中的第一个消息框,而…...
解除网站IP抓取限制的方法有哪些?
在爬取网站数据时,经常会遇到IP被限制,导致返回的数据无法显示或者直接空白的情况。这时候就需要采取一些方法来解除网站对IP的爬取限制。IP代理是帮助用户绕过网站限制,保持稳定连接,实现数据顺畅爬取的重要解决方案。 1、IP代理…...
“手撕”二叉树的OJ习题
故事的开头,我们先来三道不是oj的开胃菜,练练手感,后面9道都是OJ题。 目录 第一题 第二题 第三题 第四题 第五题 第六题 第七题 第八题 第九题 第十题 第十一题 第一题 二叉树前序非递归遍历实现 。 首先我们需要一个栈来存放二…...
Linux Mint 21.3简介
Linux Mint 21.3是一个更新版本,其中包含了许多新特性和改进。以下是一些主要更新内容: 1. Cinnamon 6.0桌面环境:Linux Mint 21.3采用了最新的Cinnamon 6.0桌面环境,带来了新的功能和改进,例如支持Wayland会话&#…...
C++11 面试题整理
C面试题 1 菱形继承 2 多态 多态实现原理: 静态多态 动态多态 静态多态: 依赖函数重载,编译期确定。 函数重载:允许在同一作用于内声明多个功能类似的同名函数,函数列表不同。注意:不能仅通过返回值类型…...
【智能制造-2】焊缝跟踪
焊缝跟踪? 焊缝跟踪:指在焊接位置前方安装光学传感器进行数据采集,然后传输到焊接机器人,进行自适应的各种模糊控制算法校正焊接机器人或专机的轨迹,实现自适应控制,达到实时的焊缝跟踪。 焊缝跟踪的方法…...
优思学院|用ChatGPT快速完成数据分析图表【柏累托图法】
数据分析是很多行业的人不可少的一部分,尤其是质量工程师更是日常的工作。然而,随着科技的进步,人工智能(AI)将逐渐承担起数据计算的工作,这意味着未来的质量工程师需要具备的不仅仅是计算能力,…...
[晕事]今天做了件晕事37 extern “C“ 被认为了是外部函数
最近看到一个函数声明是 extern “C" void _dump(); 这里的声明是要告诉编译器,这个_dump是C语言的符号,没有经过mangle过的。但是这个关键字可能让人混淆是外部函数。因为这个关键字可以声明外部函数。这也算是一词多用的一个普遍问题。关键的关键…...
问题:关于醋酸钠的结构,下列说法错误的是() #媒体#媒体
问题:关于醋酸钠的结构,下列说法错误的是() A.有极性键 B.有非极性键 C.是极性分子 D.是离子晶体 参考答案如图所示...
网络安全(补充)
同步包风暴(SYN Flood)攻击者假造源网址发送多个同步数据包(SYN Packet)给服务器,服务器因无法收到确认数据包(ACK Packet),使TCP/IP协议三次握手无法顺利完成,因而无法建…...
Redis集群(3)
集群扩容 节点配置和启动 我们要加入两个节点,主节点端口为6903,从节点端口为6933。配置与6900节点类似,不再赘述。启动这两个节点: ./redis-server ../conf/cluster_m_6903.conf ./redis-server ../conf/cluster_s_6933.conf加…...
防止Selenium被检测 Google Chrome 125
背景 最近在使用selenium自动播放学习课程,相信大家也有一些类似的使用场景。 能自动化的事情,绝不自己干。 为防止被检测是机器人做题,刷视频,需要做一些小调整。 先来看作为服务方维护者,是如何检测是Selenium打…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 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、…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
嵌入式常见 CPU 架构
架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集,单周期执行;低功耗、CIP 独立外设;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel(原始…...
WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天,深度学习与大模型技术已成为推动行业变革的核心驱动力,而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心,系统性地呈现了两部深度技术著作的精华:…...

