Vue2 第六节 key的作用与原理

news2024/11/13 15:46:20

(1)虚拟DOM

(2)v-for中的key的作用

一.虚拟DOM

1.虚拟DOM就是内存中的数据

2.原生的JS没有虚拟DOM: 如果新的数据和原来的数据有重复数据,不会在原来的基础上新加数据,而是重新生成一份

 3. Vue会有虚拟DOM和真实DOM,原理就是会将虚拟DOM与真实DOM进行比较(使用diff算法)

发现有重复的数据,就不会再次渲染,这样提高了效率

 二. v-for中的key的作用

1. 虚拟DOM中key的作用

  key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】 随后,Vue会进行【新虚拟DOM】和【旧虚拟DOM】的差异比较,对比规则如下

2.对比规则

  • 旧虚拟DOM找到了与新虚拟DOM相同的key

    ① 如果虚拟DOM中的内容没变,直接使用之前的真实DOM

    ② 如果虚拟DOM中的内容变了,则生成新的真实DOM, 随后替换掉页面中之前的真实DOM

  • 旧虚拟DOM中未找到与新虚拟DOM相同的key

    ① 创建新的真实DOM,随后渲染到页面

3.如果用index作为key可能会引发的问题

① 如果对数据进行逆序添加,逆序删除等破坏顺序的操作,会产生没有必要的真实DOM更新

界面效果没问题,但是效率低

② 如果结构中包含输入类的DOM,会产生错误DOM更新,界面会产生问题

 4.使用id作为key,数据不会错乱,而且绿色框部分是新生成的,红色框部分是复用之前的,提高了效率,界面部分也不会错乱 

5.如果没有写key,为什么也会有问题?

Vue会把遍历时候的索引值自动作为key,也就是前面的index,所以在使用v-for遍历的时候,一定记得加上key,而且这个key最好是唯一标识符

6.开发中如何正确选择key

① 最好是使用每条数据的唯一标识作为key, 比如id,手机号,身份证号,学号

② 如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,仅用于渲染界面,并且没有输入型数据时,就可以使用index作为key

         

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/812061.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

结构方程模型的绘制

模型的绘制是我们最终呈现出的一个结果 所以说这个课程主要关注的有两点 第一点就是模型图的绘制 第二点就是结果的解释 关于中间计算过程和背后的理论的一个结果 在本文章的所有的讲解过程中 只注重模型图的绘制方法 如何高效的绘制出所需要的一个模型图 同时能够调整…

【小吉带你学Git】Git分支

🎊专栏【Git】 🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【Counting Stars 】 欢迎并且感谢大家指出小吉的问题🥰 文章目录 🤖概述🍔什么是分支🍔使用分支的好处&am…

百万QPS系统如何设计?

一、关系链业务简介 从主站业务角度来看,关系链指的是用户A与用户B的关注关系。以关注属性细分,以关注(订阅)为主,还涉及拉黑、悄悄关注、互相关注、特别关注等多种属性或状态。目前主站关系链量级较大,且还…

九、HAL_IWDG独立看门狗的使用

1、开发环境 (1)Keil MDK: V5.38.0.0 (2)STM32CubeMX: V6.8.1 (3)MCU: STM32F407ZGT6 2、IWDG简介 (1)IWDG即独立看门狗。 (2)看门狗本质上是一个定时器,设置一个时间,时间到即让程序复位。所以需要在在时间未到之前重置定时器,也就是喂…

线性表详细讲解

2.1 线性表的定义和特点2.2 案例引入2.3 线程表的类型定义2.4 线性表的顺序表示和实现2.4.1 线性表的顺序存储表示2.4.2 线性表的结构类型定义2.4.3 顺序表基本操作的实现2.4.4 顺序表总结 2.5 线性表的链式表示和实现2.5.1 线性表的链式存储表示2.5.2 单链表的实现&#xff08…

ARM裸机-3

1、嵌入式和单片机的区别 1.1、芯片平台 主流的单片机平台:51、PIC、STM32、AVR、MSP430等 主流的嵌入式平台:ARM、PPC、MIPS 1.2、资源、价格、应用领域 单片机片上资源有限、价格低、应用领域多为小家电、终端设备等。 嵌入式系统片上资源丰富、价格…

数据库连接及使用Statement对象完成CRUD

一、数据库连接: 二、使用Statement对象完成CRUD: 1、插入: 2、删除 3、修改 4、查询 三、ORM对象关系映射

数据结构:顺序表详解

数据结构:顺序表详解 一、 线性表二、 顺序表概念及结构1. 静态顺序表:使用定长数组存储元素。2. 动态顺序表:使用动态开辟的数组存储。三、接口实现1. 创建2. 初始化3. 扩容4. 打印5. 销毁6. 尾插7. 尾删8. 头插9. 头删10. 插入任意位置数据…

pytorch 中 view 和reshape的区别

在 PyTorch(一个流行的深度学习框架)中, reshape 和 view 都是用于改变张量(tensor)形状的方法,但它们在实现方式和使用上有一些区别。下面是它们之间的主要区别: 实现方式: reshap…

13年测试经验,性能测试-压力测试指标分析总结,看这篇就够了...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 一般推荐&#xf…

Jmeter环境变量配置及测试

上图是Windows版本的测试结果。 Windows系统: win11:“此电脑”——鼠标右键“属性”——“高级系统设置”——“环境变量” 1.1 新建“系统变量”:JMETER_HOME JMETER_HOME变量值为解压后的jmeter路径,如: D:\apach…

AD21原理图的高级应用(三)原理图多通道的应用

(三)原理图多通道的应用 在很多大型的设计过程中,我们可能会遇到需要重复使用某个图纸,如果使用常规的复制粘贴,虽然可以达到设计要求,但原理图的数量将会变得庞大而烦琐。Altium Designer 支持多通道设计。 多通道设…

数字图像处理(番外)图像增强

图像增强 图像增强的方法是通过一定手段对原图像附加一些信息或变换数据,有选择地突出图像中感兴趣的特征或者抑制(掩盖)图像中某些不需要的特征,使图像与视觉响应特性相匹配。 图像对比度 图像对比度计算方式如下: C ∑ δ δ ( i , j …

数学学习——最优化问题引入、凸集、凸函数、凸优化、梯度、Jacobi矩阵、Hessian矩阵

文章目录 最优化问题引入凸集凸函数凸优化梯度Jacobi矩阵Hessian矩阵 最优化问题引入 例如:有一根绳子,长度一定的情况下,需要如何围成一个面积最大的图像?这就是一个最优化的问题。就是我们高中数学中最常见的最值问题。 最优化…

【C++进阶:哈希--unordered系列的容器及封装】

本课涉及到的所有代码都见以下链接,欢迎参考指正! practice: 课程代码练习 - Gitee.comhttps://gitee.com/ace-zhe/practice/tree/master/Hash unordered系列关联式容器 在C98中,STL提供了底层为红黑树结构的一系列关联式容器,在…

React井字棋游戏官方示例

在本篇技术博客中,我们将介绍一个React官方示例:井字棋游戏。我们将逐步讲解代码实现,包括游戏的组件结构、状态管理、胜者判定以及历史记录功能。让我们一起开始吧! 项目概览 在这个井字棋游戏中,我们有以下组件&am…

交叉编译工具链的安装、配置、使用

一、交叉编译的概念 交叉编译是在一个平台上生成另一个平台上的可执行代码。 编译:一个平台上生成在该平台上的可执行文件。 例如:我们的Windows上面编写的C51代码,并编译成可执行的代码,如xx.hex.在C51上面运行。 我们在Ubunt…

jellyfin搭建服务器后,快解析端口映射让外网访问

Jellyfin是一款相对知名的影音服务器,是一套多媒体应用程序软件套装,可以有效的组织管理和共享数字媒体文件,不少伙伴喜欢用jellyin在本地自己主机上搭建自己的服务器。当本地搭建服务器后,面对动态IP和无公网IP环境困境下&#x…

【javaSE】面向对象程序三大特性之封装

目录 封装的概念 访问限定符 说明 访问private所修饰的变量的方法 封装扩展之包 包的概念 导入包中的类 注意事项 自定义包 基本规则 操作步骤 步骤一 ​编辑步骤二 ​编辑 步骤三 步骤四 步骤五 包的访问权限控制举例 常见的包 static成员 再谈学生类 s…

Vue中导入并读取Excel数据

在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据. 一、引入依赖 npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx二、在main.js中引入 import XLSX from xlsx三、创建vue文件 <div><el-uplo…