Vue中key的原理以及diff算法

news2025/2/23 17:25:23

        简介:Vue的key用于在虚拟DOM中标记节点,方便后面的diff对比算法进行对比,提升效率。

        Vue的vm或者vc实例一共管理着3个DOM对象,分别他的模板对应的真实DOM、真实DOM的备份、以及重新生成的新的DOM,后两个可以看成是虚拟DOM,只要后面两个DOM的DOM树的叶子或者节点不一样(被指令操作虚拟DOM进行了修改),那么就会通过渲染函数render重新更新HTML页面上的真实DOM。

        使用列表渲染时,会生成新的节点,这些节点不是一开始在模板当中写的,属于后来的DOM节点,所以需要特殊管理。

        列表渲染新生成的DOM节点一般是一棵子DOM树,使用key可以记录这棵子树的根节点,diff差分算法就是根据从这个子树的根节点开始进行对比,判断DOM节点是否发生变化。

        如果发现key不存在,直接创建新的子树。

        如果key存在,则会对子树遍历。但是对于一些在HTML中的真实DOM中存在的内容,比如input框里面的内容,Vue是不知道的,因为Vue只有一开始真实DOM的备份,后面这个HTML页面上的真实DOM发生了什么变化Vue是不知道的。这就会导致真实DOM的一部分被替换掉,而另外一部分还是残留的老的真实DOM。

        如果遍历容器时,使用index作为key,则会出现部分真实DOM残留的问题。实际开发中,一般使用独一无二的index作为key。

        总结如下:

  1. 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
  2. 如果不存在对数组数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表,使用index作为key是没有问题的

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

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

相关文章

Scaffold-GS 代码阅读笔记

1. 系统启动部分 使用 python 中的 parser 库 为配置系统的参数设定, 和3DGS 类似,并且使用safe_state(args.quiet) 函数 为每一次的 log 输出加上对应的 时间戳 ## 配置参数的设定lp ModelParams(parser)op OptimizationParams(parser)pp PipelineParams(pars…

每日一题(leetcode1702):修改后的最大二进制字符串--思维

找到第一个0之后,对于后面的子串(包括那个0),所有的0都能调上来,然后一一转化为10,因此从找到的第一个0的位置开始,接下来是(后半部分子串0的个数-1)个1,然后…

移动WEB开发之响应式布局

一、响应式开发 1、响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 2、响应式布局容器 响应式布局容器需要一个父级作为布局容器,来配合子集元素来实现变化效果。 原理就是在不同屏幕下通过媒体查询…

OpenHarmony 资源调度之内存管理源码分析

作者:张守忠 1 内存管理简介 内存管理部件位于全局资源调度管控子系统中,基于应用的生命周期状态,更新进程回收优先级列表,通过内存回收、查杀等手段管理系统内存,保障内存供给。 1.1 内存管理框架 内存管理部件主要…

你一定不能错过的多模态大模型!阿里千问开源Qwen-VL!具备图文解读等能力

1. Qwen-VL简介 1.1. 介绍 Qwen-VL的多语言视觉语言模型系列,基于Qwen-7B语言模型。该模型通过视觉编码器和位置感知的视觉语言适配器,赋予语言模型视觉理解能力。 Qwen-VL采用了三阶段的训练流程,并在多个视觉语言理解基准测试中取得了领先的成绩。该模型支持多语言、多图…

这一次,阿里能完成变革么

更多精彩内容在公众号。 马云在阿里内网发表题为《致改革 致创新》的帖子。释放支持继续改革信号。全文参考下图 马云在最近的发言中首先引用了阿里巴巴集团董事局主席蔡崇信的一次采访,表示对蔡崇信坦率地承认过去错误的勇敢态度表示赞赏。马云强调,犯错…

【MapBox】实现实时飞行轨迹功能

之前写了一篇MapBox添加带箭头的轨迹线,现在在这个基础之上实现获取到无人机的推送点位数据实时飞行的功能 首先创建实例,将无人机的图标加载在地图上 const MAP_UAV_FLIGHT_ING (values, layerKey 无人机飞行) > {ClearUAVMap();const map GET_…

功能测试_验证新浪邮箱登录的正确性

案例:验证验证新浪邮箱登录的正确性 功能测试_等价类设计用例: 步骤: 1:明确需求:邮箱能否登录 2:划分等价类:有效等价类、有效取值、无效等价类、无效取值 3:提取数据编写用例:用例编号、…

消息队列MQ的介绍和docker安装MQ

一、什么是mq? MQ全称 Message Queue(消息队列),是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信,解耦。 二、常见的mq产品 RabbitMQ、RocketMQ、ActiveMQ、Kafka、ZeroMQ、MetaMq RabbitMQ: One broker …

数仓指标体系

数仓指标体系 明确统计指标 明确统计指标具体的工作是,深入分析需求,构建指标体系。构建指标体系的主要意义就是指标定义标准化。所有指标的定义,都必须遵循同一套标准,这样能有效的避免指标定义存在歧义,指标定义重复…

AcWing 1491.圆桌座位 解题思路及代码

看数论看烦了,随便找到题换换脑子,结果就遇到了这题,还挺有意思的,有几个思维难点。 先贴个题目: 以及原题链接:1491. 圆桌座位 - AcWing题库https://www.acwing.com/problem/content/description/1493/ 几…

SpringBoot修改菜品模块开发

需求分析与设计 一:产品原型 在菜品管理列表页面点击修改按钮,跳转到修改菜品页面,在修改页面回显菜品相关信息并进行修改,最后点击保存按钮完成修改操作。 修改菜品原型: 二:接口设计 通过对上述原型图…

linux系统离线安装nginx

介绍:nginx是一个高性能的http和反向代理服务器,并发能力很强,一般用来做负载均衡比较多,日常开发中用作web服务器 说明:本文用到的所有资源,笔者已经打包上传了,需要下载的请于文章顶部下载 …

【PDF技巧】带有限制编辑的PDF文件,如何编辑?

PDF文件打开之后发现设置了限制编辑,功能栏中的编辑按钮都是灰色的,导致PDF文件里的内容无法编辑。那么带有限制编辑的PDF文件,如何编辑?今天分享两个方法。 方法一: 我们可以将PDF文件转换成其他格式,有…

损失函数:BCE Loss(二元交叉熵损失函数)、Dice Loss(Dice相似系数损失函数)

损失函数:BCE Loss(二元交叉熵损失函数)、Dice Loss(Dice相似系数损失函数) 前言相关介绍BCE Loss(二元交叉熵损失函数)代码实例直接计算函数计算 Dice Loss(Dice相似系数损失函数&a…

【讲解下常见的分类算法】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

医疗器械UDI码的DI和PI什么意思

一、理解医疗器械UDI 医疗器械的UDI码是Unique Device Identifier Code的缩写,意为唯一设备识别码。 医疗器械的UDI码是唯一设备识别码,由两个部分组成:DI和PI。 1.1、DI 理解 DI(Device Identifier,设备标识符&am…

STM32F407单片机通用24CXXX读写程序(KEIL),兼容24C系列存储器(24C01到24C512),支持存储器任意地址跨页连续读写多个页

STM32F407单片机通用24CXXX读写程序(KEIL),兼容24C系列存储器(24C01到24C512),支持存储器任意地址跨页连续读写多个页 Chapter1 STM32F407单片机通用24CXXX读写程序(KEIL)&#xff0…

「每日跟读」英语常用句型公式 第9篇

「每日跟读」英语常用句型公式 第9篇 1. Go-to ___ 第一选择___ What’s your go-to snack when you’re hungry? (你饿的时候第一选择的零食是什么?) Who’s your go-to friend for advice? (你第一选择的朋友是谁来寻求建议?) Which is your go-t…

子域名是什么?有什么作用?

在互联网世界中,域名是我们访问网站的关键。每一个公司的网站都需要拥有自己的域名,其中有些大型公司的网站还不止一个域名,除了主域名外还拥有子域名。有些人感到非常困惑,不知道子域名是什么。其实子域名也就是平时所说的二级域…