Vue2 第六节 key的作用与原理

(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

         

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

驶向专业:嵌入式开发在自动驾驶中的学习之道

导语: 自动驾驶技术在汽车行业中的快速发展为嵌入式开发领域带来了巨大的机遇。作为自动驾驶的核心组成部分,嵌入式开发在驱动汽车的智能化和自主性方面发挥着至关重要的作用。本文将探讨嵌入式开发的学习方向、途径以及未来在自动驾驶领域中的展望。 一、学习方向:…

3ds MAX绘制茶壶

综合一下之前的内容画个茶壶 长方形,然后转化为可编辑多边形,添加节点并设置圆角,如下图 车削生成一个圆环,其实这一步也可以用一个圆柱体和两个圆角圆柱体解决 效果如下: 茶壶的底座绘制好了 接下来是茶壶的上半边 …

python测试开发面试常考题:装饰器

目录 简介 应用 第一类对象 装饰器 描述器descriptor 资料获取方法 简介 Python 装饰器是一个可调用的(函数、方法或类),它获得一个函数对象 func_in 作为输入,并返回另一函数对象 func_out。它用于扩展函数、方法或类的行为。 装饰器模式通常用…

Hudi Flink SQL源码调试学习(1)

前言 本着学习hudi-flink源码的目的,利用之前总结的文章Hudi Flink SQL代码示例及本地调试中的代码进行调试,记录调试学习过程中主要的步骤及对应源码片段。 版本 Flink 1.15.4Hudi 0.13.0 目标 在文章Hudi Flink SQL代码示例及本地调试中提到:我们…

【LLM系列之指令微调】长话短说大模型指令微调的“Prompt”

1 指令微调数据集形式“花样”太多 大家有没有分析过 prompt对模型训练或者推理的影响?之前推理的时候,发现不加训练的时候prompt,直接输入模型性能会变差的,这个倒是可以理解。假如不加prompt直接训练,是不是测试的时…

基于高通QCC5171的对讲机音频数据传输系统设计

一 研发资料准备 二 设计方法 蓝牙连接与配对:使用QCC5171的蓝牙功能,实现设备之间的蓝牙连接和配对。确保设备能够相互识别并建立起稳定的蓝牙连接。 音频采集与处理:将麦克风采集到的音频数据通过QCC5171的ADC(模数转换器&…

linux系统编程重点复习--线程同步

目录 复习目标: 1 互斥锁 1.1互斥锁的使用步骤 1.2 练习 1.3 死锁 2 读写锁 3 条件变量 4 信号量 复习目标: 熟练掌握互斥量的使用说出什么叫死锁以及解决方案熟练掌握读写锁的使用熟练掌握条件变量的使用理解条件变量实现的生产消费者模型理解…

python简单的病毒编程代码,如何用python写一个病毒

大家好,本文将围绕python简单的病毒编程代码展开说明,如何用python做恶搞病毒是一个很多人都想弄明白的事情,想搞清楚如何用python写一个病毒需要先了解以下几个事情。 1、Python能不能写病毒 国家计算机病毒应急处理中心通过对互联网的监测…

算法leetcode|64. 最小路径和(rust重拳出击)

文章目录 64. 最小路径和:样例 1:样例 2:提示: 分析:题解:rust:go:c:python:java: 64. 最小路径和: 给定一个包含非负整数的 m x n 网…

windows 安装 mongodb 数据库

软件下载 访问官方的下载地址: https://www.mongodb.com/try/download/community ,然后选择对应的版本进行下载 下载好了之后双击进行安装 软件安装 1、点击 next 点击下一步 2、勾选接受协议,点击 next 3、第三页有两个选项&#x…

redisson分布式锁学习

什么是分布式锁? 当有多个线程并发访问同一共享数据时,如果多个线程同时都去修改这个共享数据,且修改操作不是原子操作,就很有可能出现线程安全问题,而产生线程安全问题的根本原因是缺乏对共享数据访问的同步和互斥。 为了解决这个问题,通常我们的做法…

P2P网络NAT穿透原理(打洞方案)

1.关于NAT NAT技术(Network Address Translation,网络地址转换)是一种把内部网络(简称为内网)私有IP地址转换为外部网络(简称为外网)公共IP地址的技术,它使得一定范围内的多台主机只…

SpringBoot超级详解

1.父工程的父工程 在父工程的父工程中的核心依赖,专门用来版本管理的 版本管理。 2.父工程 资源过滤问题,都帮解决了,什么配置文件,都已经配置好了,资源过滤问题是帮助,过滤解决让静态资源文件能够过滤到…

别再分库分表了,来试试它吧

什么是NewSQL传统SQL的问题 升级服务器硬件数据分片NoSQL 的问题 优点缺点NewSQL 特性NewSQL 的主要特性三种SQL的对比TiDB怎么来的TiDB社区版和企业版TIDB核心特性 水平弹性扩展分布式事务支持金融级高可用实时 HTAP云原生的分布式数据库高度兼容 MySQLOLTP&OLAP&#xff…

openssl/bn.h: No such file or directory

报错截图 解决方法 ubuntu apt install libssl-dev -y centos yum install openssl-devel -y

第六章 支持向量机

文章目录 支持向量机间隔和支持向量对偶问题问题推导SMO 核函数实验 支持向量机 ⽀持向量机(Support Vector Machines,SVM) 优点:泛化错误率低,计算开销不⼤,结果易解释。缺点:对参数调节和核…

Python 教程之标准库概览

概要 Python 标准库非常庞大,所提供的组件涉及范围十分广泛,使用标准库我们可以让您轻松地完成各种任务。 以下是一些 Python3 标准库中的模块: 「os 模块」 os 模块提供了许多与操作系统交互的函数,例如创建、移动和删除文件和…

CLIP-GCD: Simple Language Guided Generalized Category Discovery(论文翻译)

CLIP-GCD: Simple Language Guided Generalized Category Discovery 摘要1 介绍2 相关工作2.1 NCD2.2 无监督聚类2.3 自监督和多模态预训练 3 方法3.1 GCD 问题设置3.2 我们的方法3.2.1 使用CLIP 在GCD 4 实验4.1 模型架构细节4.2 数据集和评估4.3 和最先进水平比较4.4 分析4.5…

Linux下 Docker容器引擎基础(1)

简述: Docker的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的、自给自足的容器。通过这种容器打包应用程序,意味着简化了重新部署、调试这些琐碎的重复工作,极大的提高了工作效率。例如:项目从腾讯云迁移阿…