vue的diff算法原理

news2024/11/15 8:55:28

  • diff 概念
  • diff比较流程
    • 头头
    • 尾尾
    • 头尾
    • 尾头
    • 比对查找
    • 过程
  • 与vue3的区别

diff 概念

vue基于虚拟DOM做更新,diff的核心就是比较两个虚拟节点的差异。
vue的diff算法是平级比较,不考虑跨级比较的情况。内部采用深度递归+ 双指针的方式进行比较

在这里插入图片描述

diff比较流程

  1. 先比较是否是相同节点 key tag (标识,标签名)
  2. 相同节点比较属性,并复用老节点(将老的虚拟dom复用给新的虚拟节点dom)
  3. 比较儿子节点,考虑老节点和新节点儿子的情况
      1. 老的没儿子,现在有儿子。直接插入新的儿子
      1. 老的有儿子,新的没儿子。直接删除页面节点
      1. 老的儿子是文本,新的儿子是文本,直接更新文本节点即可
      1. 老的儿子是一个列表,新的儿子也是一个列表 updateChildren – 核心的diff算法,化为数组比对
  4. 列表优化比较(对于列表的情况,updateChildren)

头头尾尾尾头头尾比对查找

头头

先看头指针和头指针,若相同则头指针同时往右移,直到上方的头尾重合遍历完成,把下方的D 直接拿上来
在这里插入图片描述

尾尾

如果头指针和头指针不一样,再看尾指针和尾指针,若相同则尾指针同时往左走,知道上方的头尾重合遍历完成,把下方的D直接拿上来
在这里插入图片描述

头尾

如果头指针和头指针不一样,且尾指针和尾指针不一样,再看头指针和尾指针,若相同则把头指针插到尾指针的后面,头指针往后移,尾指针往前移,—之后再按照 头头,尾尾,头尾,尾头,直到遍历完成
在这里插入图片描述

尾头

如果头指针和头指针不一样,且尾指针和尾指针不一样,头指针和尾指针不一样,,再看尾指针和头指针,若相同则把尾指针插到头指针的前面,尾指针往前移,头指针往后移,—之后再按照 头头,尾尾,头尾,尾头,直到遍历完成
在这里插入图片描述

比对查找

如果头头,尾尾,头尾,尾头都不成立,就会通过对比查找的方式,若下面的头指针的元素,在上面中存在,则会把上面元素的放到头指针前面,下面头指针往后移,上面头指针不变,–之后再按 头头,尾尾,尾头,头尾,对比查找,直到遍历完成
在这里插入图片描述

过程

在这里插入图片描述

与vue3的区别

vue采用的 最长递归序列法 来实现 diff 优化

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

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

相关文章

文本挖掘 实践笔记

文本挖掘流程:(How) 文本预处理->特征提取->文本分析->可视化展示 文本预处理:包括文本清洗、分词、词性标注等 特征提取:将文本转化为词频、TF-IDF、embedding向量等 文本分析:利用统计学或机器学习的知识,做聚类、情感识别等 可视化展示:帮助人们更好…

Java版本电子招标采购系统源码:营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展

营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点:招标类项目立项申请入口,用户可以保存为草稿,提交。 2、非招标立项申请 功能点:非招标…

Pandas技术重点来了

Pandas库建立在NumPy之上,并为Python编程语言提供了易于使用的数据结构和数据分析工具。 1.安装及调用 pip install pandasimport pandas as pd 一种能够保存任何数据类型的一维标记数组 >>> s pd.Series([3, -5, 7, 4], index[a, b, c, d]) 一种具有潜…

第八届cccc团体程序设计天梯赛——个人参赛总结——无代码纯粹的参赛总结

第八届cccc团体程序设计天梯赛——个人参赛总结——无代码纯粹的参赛总结 目录 第八届cccc团体程序设计天梯赛——个人参赛总结——无代码纯粹的参赛总结引言~介绍一下cccc天梯赛(选读)开篇介绍(以下是个人经历部分的分享)赛前准备…

其他品牌的触控笔能用在ipad上?性价比高的触控笔合集

随着平板电脑在学校、办公室等领域的广泛应用,越来越多的人需要一支出色的电容笔。虽然苹果原装的电容笔很给力,但是其的价格实在是太贵了,仅仅把它用于在纸上写写字,实在是太可惜了。所以,哪个电容笔更便宜&#xff1…

密歇根大学Python系列之一:零基础 Python 入门

密歇根大学计算机专业注重将计算机科学理论与实践相结合,旨在帮助学生全面掌握计算机科学的基础理论和实践技能: 1.计算机程序设计:编程技能和常见编程语言,如C和Java和Python等; 2.数据结构和算法:数据结…

2023年能源与环境工程国际会议(CFEEE 2023)

会议简介 Brief Introduction 2023年能源与环境工程国际会议(CFEEE 2023) 会议时间:2023年9月1日-3日 召开地点:中国三亚 大会官网:CFEEE 2023-2023 International Conference on Frontiers of Energy and Environment Engineering 由三亚纵横…

手撕八大排序算法(解析源码+图解)

八大排序算法 文章目录 八大排序算法一、插入排序1.代码实现2.思路图解 二、希尔排序1.代码实现2.思路图解 三、选择排序(优化版)1.代码实现2.思路图解 四、堆排序1.代码实现2.思路图解 五、冒泡排序1.代码实现2.思路图解 六、快速排序1.递归版本2.非递归版本3.快速排序的两个优…

Android之 Bitmap使用

一,简介 1.1 Bitmap是一种图片在内存中的表现形式,不管是png,还是jpg最终都是以bitmap的形式显示到控件上面。 Bitmap是一种位图,位图​是点阵图像​或栅格图像,是由称作像素(图片元素)的单个…

C++篇----类、封装、类访问权限、类实例化

文章目录 一、面向过程和面向对象二、类 一、面向过程和面向对象 c语言是面向过程的编程语言 c是面向对象的编程语言 面向过程:关注过程,对于求解问题的不走,调用函数逐步解决问题 就洗衣服来说:洗衣服需要放水,倒洗衣…

PCL点云库(2) — IO模块

目录 2.1 IO模块接口 2.2 PCD数据读写 (1) PCD数据解析 (2)PCD文件读写示例 2.3 PLY数据读写 (1)PLY数据解析 (2)PLY文件读写示例 2.4 OBJ数据读写 (1&#xff…

QMS-云质说质量 - 10 我和我的客户投诉(2) - 客户逐利 驱除良币

云质QMS原创 转载请注明来源 作者:王洪石 上策伐谋 中策伐交 前面发过一篇关于客户投诉的文章“逢年过节要祈祷”,引起了很多质量人的共鸣,特别是汽车零部件行业曾经和正在负责客诉的质量同行们。 真实的产品质量问题,是否发生只…

Linux-初学者系列2——用户组管理和权限管理

用户组管理和权限管理 Linux-初学者系列2_用户组管理和权限管理一、所有者1、查看文件的所有者指令 2、修改文件所有者指令实操 二、组创建语法指令:实操: 三、所在组1、查看文件/目录所在组基本指令:实操: 2、修改文件所在组基本…

【读书笔记】高效能人士的7个习惯

高效能人士的7个习惯-史蒂芬柯维 个人成功1. 积极主动(BE PROACTIVE)2. 以终为始(BEGIN WITH THE END IN MIND)3. 要事第一(PUT FIRST THINGS FIRST)个人成功总结 集体成功4. 双赢思维(THINK WI…

flex布局属性详解

Flex布局 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content其他orderflexalign-self 含义:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 flex-direction flex-direction属性决定主轴的方向&…

服务(第十二篇)LVS-DR模式

数据包流向分析: (1)客户端发送请求到 Director Server(负载均衡器),请求的数据报文(源 IP 是 CIP,目标 IP 是 VIP)到达内核空间。 (2)Director Server 和 Re…

022 - C++ 析构函数

上期我们讨论了构造函数。认识了它是什么以及如何使用它。如果你没有看上一期,那么你一定要回去看一下。 今天我们要讨论一下它的“孪生兄弟”,析构函数,它们在某些方面非常相似。 构造函数是你创建一个新的实例对象时运行,而析…

无线测温系统在煤矿高压电气设备上的应用

摘要:随着社会经济的不断发展,电力系统向着高电压、高容量的方向前进着,电力系统全新的技术与设备层出不穷,电力的输送能力不断提升。然而,高压电气设备承载的高压电力负荷也让其自身的温升问题成为了威胁电网稳定的元…

张驰咨询:企业如何在不确定的环境中逆势增长?

企业不确定环境主要包括以下几个方面: 1、宏观经济环境的不确定性 包括国内外经济形势、政策调整、外汇汇率等因素的变化,会对企业的发展带来不确定性。 2、市场需求的不确定性 市场需求的变化,包括消费者需求、市场规模、市场结构等方面…

【自制键盘01】CH9329代码两则,让任何单片机都能做键盘

简介 CH9329是一款由WCH(Nanjing QinHeng Electronics Co. Ltd.)生产的USB转串口芯片,可以方便地将USB接口转换为串口接口,它在键盘设计这块可以实现作为MCU和电脑设备的“中间人”,把串口信号转换为按键。 引脚定义 …