Vue 3 Diff 算法过程及基本实现方式
Vue 3 的 Diff 算法
Vue 3 使用的是一种高效的 DOM Diff 算法，主要用于在虚拟 DOM 树发生变化时，计算最小的操作以更新真实 DOM。相比 Vue 2，Vue 3 的 Diff 算法做了很多优化。
Diff 算法的背景与目的
- 虚拟 DOM 树的对比：在 Vue 中，每次组件状态更新时，会生成一个新的虚拟 DOM 树，Diff 算法会对新旧虚拟 DOM 树进行对比，计算需要更新的部分。
- 更新真实 DOM：根据 Diff 的结果，Vue 仅对必要的部分执行 DOM 更新，避免全量重建，提高性能。
Vue 3 Diff 算法的核心逻辑
Vue 3 的 Diff 算法采用了一种 双端比较策略，与 Vue 2 的简单逐个比较方式不同，其性能更高。
算法流程
-
双端指针（双端 Diff）
- Vue 3 使用左右双指针同时扫描新旧节点列表：
- 头指针从左向右。
- 尾指针从右向左。
- 优化了只从左到右逐个比较的逻辑，适应更多场景。
- Vue 3 使用左右双指针同时扫描新旧节点列表：
-
比较规则
- 优先匹配相同节点：
- 比较当前头指针的节点，如果相同则直接复用。
- 如果头尾对比都无法找到相同节点，则可能需要移动或创建节点。
- 最长递增子序列（LIS）优化：
- 用于处理中间乱序的节点，最小化移动操作。
- 优先匹配相同节点：
-
四种主要比较情况
- 头与头比较（旧头与新头）：
- 如果匹配，移动头指针，继续下一轮比较。
- 尾与尾比较（旧尾与新尾）：
- 如果匹配，移动尾指针，继续下一轮比较。
- 旧头与新尾比较（优化尾部插入的情况）：
- 如果匹配，说明节点从头移动到了尾，调整位置后继续。
- 旧尾与新头比较（优化头部插入的情况）：
- 如果匹配，说明节点从尾移动到了头，调整位置后继续。
- 头与头比较（旧头与新头）：
-
中间部分的乱序处理
- 当头尾指针交错后，剩余的节点（乱序部分）需要特殊处理。
- Vue 3 使用 最长递增子序列（LIS）算法 找出新列表中可以复用的最长子序列。
- 其余节点要么插入，要么删除。
- 最小化 DOM 操作次数，提升性能。
Vue 3 Diff 算法的优化点
-
双端比较
- 同时从两端扫描新旧虚拟 DOM 节点列表，减少无效比较。
-
最长递增子序列（LIS）
- 在处理乱序部分时，通过 LIS 算法最小化 DOM 移动操作。
-
Patch 标记
- Vue 3 在生成虚拟 DOM 时，对每个节点添加了 动态标记，用于标识哪些部分需要更新、复用或跳过，从而减少无用的计算。
-
静态节点的静态提升
- 对不变的静态节点进行提升，只计算一次，避免重复对比。
-
Fragment 支持
- 允许多个子节点共存（不需要唯一根节点），简化 DOM 结构的操作。
Diff 算法的运行时复杂度
- 最优情况（双端快速匹配）：
O(n) - 普通情况（中间乱序部分 + LIS）：
O(n + m)，其中n是节点数量，m是 LIS 的计算复杂度。 - 最坏情况（无任何匹配）：
O(n^2)，但在实际场景中几乎不会发生。
伪代码示例
以下是 Vue 3 Diff 核心逻辑的简化伪代码：
function diff(oldChildren, newChildren) {let oldStart = 0, oldEnd = oldChildren.length - 1;let newStart = 0, newEnd = newChildren.length - 1;while (oldStart <= oldEnd && newStart <= newEnd) {if (oldChildren[oldStart] === newChildren[newStart]) {// 头与头匹配patch(oldChildren[oldStart], newChildren[newStart]);oldStart++;newStart++;} else if (oldChildren[oldEnd] === newChildren[newEnd]) {// 尾与尾匹配patch(oldChildren[oldEnd], newChildren[newEnd]);oldEnd--;newEnd--;} else if (oldChildren[oldStart] === newChildren[newEnd]) {// 旧头与新尾匹配move(oldChildren[oldStart], newEnd);oldStart++;newEnd--;} else if (oldChildren[oldEnd] === newChildren[newStart]) {// 旧尾与新头匹配move(oldChildren[oldEnd], newStart);oldEnd--;newStart++;} else {// 中间乱序部分处理handleUnmatched(oldChildren, newChildren, oldStart, oldEnd, newStart, newEnd);}}// 剩余节点的插入或删除handleRemaining(oldChildren, newChildren, oldStart, oldEnd, newStart, newEnd);
}
总结
Vue 3 的 Diff 算法通过以下方式提升性能：
- 双端比较优化。
- 利用最长递增子序列（LIS）减少 DOM 操作。
- 静态提升减少重复计算。
- 更高效地处理 Fragment。
相关文章：
Vue 3 Diff 算法过程及基本实现方式
Vue 3 的 Diff 算法 Vue 3 使用的是一种高效的 DOM Diff 算法，主要用于在虚拟 DOM 树发生变化时，计算最小的操作以更新真实 DOM。相比 Vue 2，Vue 3 的 Diff 算法做了很多优化。 Diff 算法的背景与目的 虚拟 DOM 树的对比：在 Vue…...
EasyCVR视频汇聚平台如何配置webrtc播放地址？
EasyCVR安防监控视频系统采用先进的网络传输技术，支持高清视频的接入和传输，能够满足大规模、高并发的远程监控需求。平台支持多协议接入，能将接入到视频流转码为多格式进行分发，包括RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、W…...
PowerApps助力PowerBI实现数据写回
原文发布日期: 2019-08-01 06:03:50 0000 注：本文旨在介绍Power BI如何利用PowerApps实现用户在前端对数据源进行增删查改，关于此，你也可以在Google上找到更详细但较零散的资料 正文 在SSAS多维数据集中，开发者可以给数据开启&q…...
数据结构：DisjointSet
Disjoint Sets意思是一系列没有重复元素的集合。一种常见的实现叫做，Disjoint-set Forest可以以接近常数的时间复杂度查询元素所属集合，用来确定两个元素是否同属一个集合等，是效率最高的常见数据结构之一。 Wiki链接：https://en…...
React 元素渲染
React 元素渲染 React 是一个用于构建用户界面的 JavaScript 库，它允许开发人员创建大型应用程序，这些应用程序可以随着时间的推移而高效地更新和渲染。React 的核心概念之一是元素渲染，它描述了如何将 JavaScript 对象转换为 DOM࿰…...
【Leetcode 每日一题】3270. 求出数字答案
问题背景 给你三个 正 整数 n u m 1 num_1 num1， n u m 2 num_2 num2 和 n u m 3 num_3 num3。 数字 n u m 1 num_1 num1， n u m 2 num_2 num2 和 n u m 3 num_3 num3 的数字答案 k e y key key 是一个四位数，定义如下&…...
eNSP之家----ACL实验入门实例详解（Access Control List访问控制列表）（重要重要重要的事说三遍）
ACL实验（Access Control List访问控制列表）是一种基于包过滤的访问控制技术，它可以根据设定的条件对接口上的数据包进行过滤，允许其通过或丢弃。访问控制列表被广泛地应用于路由器和三层交换机。 准备工作 在eNSP里面部署设备&a…...
【git】-2 分支管理
目录 一、分支的概念 二、查看、创建、切换分支 1、查看分支-git branch 2、创建分支- git branch 分支名 3、切换分支- git checkout 分支名 三、git指针 -实现分支和版本间的切换 四、普通合并分支 git merge 文件名 五、冲突分支合并 【git】-初始gi…...
硬件设计-齐纳管
目录 摘要 详情 齐纳管的工作电流、 摘要 齐纳管（Zener Diode）是一种特殊的二极管，它能够在特定的反向电压下保持电流稳定。正常情况下，二极管只允许正向电流通过，而阻止反向电流流过。而齐纳管在一定的反向电压下可…...
Github出现复杂问题 无法合并 分支冲突太多 如何复原
目录 问题再现 解决思路 当然我所指的是在 main 分支开一个新的分支 删除本地文件夹 重新克隆 开一个新分支 切换分支 下载远程分支 文件覆盖 合并到主分支 问题再现 太复杂了 无法更改 编译器现状 全部崩溃了 无法更改 即使创建一个新的分支也无济于…...
《分布式光纤传感：架设于桥梁监测领域的 “智慧光网” 》
桥梁作为交通基础设施的重要组成部分，其结构健康状况直接关系到交通运输的安全和畅通。随着桥梁建设规模的不断扩大和服役年限的增长，桥梁结构的安全隐患日益凸显，传统的监测方法已难以满足对桥梁结构健康实时、全面、准确监测的需求。分布式…...
java_抽象类最佳实践-模板设计模式
基本介绍 模板设计模式可解决的问题 最佳实践 Template类 package com.hspedu.abstract_; abstract public class Template { //抽象类-模板设计模式public abstract void job();//抽象方法public void calculateTime() {//实现方法，调用 job 方法//得到开始的时间…...
linux网络 | http结尾、理解长连接短链接与cookie
前言：本节是http章节的最后一部分，主要解释一些小概念。讲解到了HTTP的方法，表单， 重定向等等。 现在废话不多说， 开始我们的学习吧。 ps：本节内容都是概念， 知道就行， 友友们放心观…...
dtdug汇编指令练习
r 通用寄存器 m 代表内存 imm 代表立即数 r8 代表8位通用寄存器 m8 代表8位内存 imm8 代表8位立即数 mov指令练习 MOV 的语法: mov 目标操作数，源操作数 作用:拷贝源操作数到目标操作数 1、源操作数可以是立即数、通用寄存器、段寄存器、或者内存单元. 2、目标操作数…...
Windows自动化Python pyautogui RPA操作
依赖包 import time import pyautogui import pyperclip import os import psutil from pywinauto.application import Application睡眠： pyautogui.sleep(1)鼠标事件： pyautogui.moveTo(100, 100, duration0.25) pyautogui.click(100, 100, duration0.…...
Ollama私有化部署大语言模型LLM
目录 一、Ollama介绍 二、安装Ollama 1、标准安装 2、国内加速 三、升级Ollama版本 四、使用Ollama 1、启动ollama服务 systemctl start ollama.service ollama serve 2、使用ollama命令 ollama run 运行模型 ollama ps 查看正在运行的模型 ollama list 查看(本地)…...
ubuntu/kali安装c-jwt-cracker
1.下载安装包 可以去GitHub下载解压，我这直接在kali克隆下来了。（网络不好可能克隆不下来） git clone https://github.com/brendan-rius/c-jwt-cracker.git 2.如果下载的压缩包就需要进行解压，克隆的直接进入目录就好了。 unzi…...
MySql按年月日自动创建分区存储过程
-- 创建存储过程【通过数据库和表名】建立【partition_number】get分区，分区间隔为【gaps】 -- datasource 数据库名称 -- table_name 数据库表名 -- partition_number 新建分区的数量 -- partition_type 分区类型（0-按天分区，1-按月分区&…...
Spring配置文件中：密码明文改为密文处理方式（通用方法）
目录 一、背景 二、思路 A) 普通方式 B) 适合bootstrap.properties方式 三、示例 A) 普通方式（连接Redis集群） A) 普通方式（连接RocketMQ） B) 适合bootstrap.properties方式 四、总结 一、背景 SpringBoot和Sprin…...
树的模拟实现
一.链式前向星 所谓链式前向星，就是用链表的方式实现树。其中的链表是用数组模拟实现的链表。 首先我们需要创建一个足够大的数组h，作为所有结点的哨兵位。创建两个足够大的数组e和ne，一个作为数据域，一个作为指针域。创建一个变…...
计算机图形学【直线和圆的生成算法】
在计算机图形学中，光栅化是将几何图元转换成一个光栅图像（像素或点）在屏幕上输出的过程。光栅化可实现图形变为二维图像，其目的是将连续的几何图形转换为离散的像素点。光栅化算法的基本原理包括两个主要步骤：首先&…...
OpenAI 故障复盘 - 阿里云容器服务与可观测产品如何保障大规模 K8s 集群稳定性
本文作者： 容器服务团队：刘佳旭、冯诗淳 可观测团队：竺夏栋、麻嘉豪、隋吉智 一、前言 Kubernetes(K8s)架构已经是当今 IT 架构的主流与事实标准（CNCF Survey[1]）。随着承接的业务规模越来越大，用户也在使…...
【深度学习】Pytorch：加载自定义数据集
本教程将使用 flower_photos 数据集演示如何在 PyTorch 中加载和导入自定义数据集。该数据集包含不同花种的图像，每种花的图像存储在以花名命名的子文件夹中。我们将深入讲解每个函数和对象的使用方法，使读者能够推广应用到其他数据集任务中。 flower_ph…...
vue js实现时钟以及刻度效果
2025.01.08今天我学习如何用js实现时钟样式，效果如下： 一、html代码如下： <template><!--圆圈--><div class"notice_border"><div class"notice_position notice_name_class" v-for"item in …...
js基础---注释与结束符
JavaScript 基础：注释与结束符 注释 注释是代码中用于解释说明的部分，不会被执行，主要有两种类型： 单行注释 符号：//作用：从符号开始到该行末尾的所有内容都会被忽略，不会被执行。示例代码&…...
from pytorch3d import _C问题
离线安装pytorch3d后，先测试： import pytorch3d 没问题后，再测试： from pytorch3d import _C 单独测试会出现： ImportError: libc10.so: cannot open shared object file: No such file or directory 或者类似不…...
PHP进阶-在Ubuntu上搭建LAMP环境教程
本文将为您提供一个在Ubuntu服务器上搭建LAMP（Linux, Apache, MySQL, PHP）环境的完整指南。通过本文，您将学习如何安装和配置Apache、MySQL、PHP，并将您的PHP项目部署到服务器上。本文适用于Ubuntu 20.04及更高版本。 一、系统更新…...
SQLite 命令
关于《SQLite 命令》的文章，我可以为您提供一个概要。SQLite是一个轻量级的嵌入式关系数据库管理系统，它以单个文件的形式存储数据，非常适合用于不需要传统数据库服务器的场景。SQLite3的命令行工具（sqlite3.exe）是一个…...
ASP.NET Core 实现微服务 - Consul 配置中心
这一次我们继续介绍微服务相关组件配置中心的使用方法。本来打算介绍下携程开源的重型配置中心框架 apollo 但是体系实在是太过于庞大，还是让我爱不起来。因为前面我们已经介绍了使用Consul 做为服务注册发现的组件 ，那么干脆继续使用 Consul 来作为配置…...
自定义Java注解及其应用
上一篇博客：Java注解 写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.blog.csdn.net/。非常感谢大家的支持。…...
回归预测 | MATLAB实GRU多输入单输出回归预测
回归预测 | MATLAB实GRU多输入单输出回归预测 目录 回归预测 | MATLAB实GRU多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 回归预测 | MATLAB实GRU多输入单输出回归预测。使用GRU作为RNN的一种变体来处理时间序列数据。GRU相比传统的RNN有较好的记…...
ISP流程--去马赛克详解
前言 本期我们将深入讨论ISP流程中的去马赛克处理。我们熟知，彩色图像由一个个像元组成，每个像元又由红、绿、蓝（RGB）三通道构成。而相机传感器只能感知光的强度，无法直接感知光谱信息，即只有亮暗而没有颜色…...
用户注册模块用户校验（头条项目-05）
1 用户注册后端逻辑 1.1 接收参数 username request.POST.get(username) password request.POST.get(password) phone request.POST.get(phone) 1.2 校验参数 前端校验过的后端也要校验，后端的校验和前端的校验是⼀致的 # 判断参数是否⻬全 # 判断⽤户名是否…...
【大数据】Apache Superset：可视化开源架构
Apache Superset是什么 Apache Superset 是一个开源的现代化数据可视化和数据探索平台，主要用于帮助用户以交互式的方式分析和展示数据。有不少丰富的可视化组件，可以将数据从多种数据源（如 SQL 数据库、数据仓库、NoSQL 数据库等࿰…...
如何搭建 Vue.js 开源项目的 CI/CD 流水线
网罗开发 （小红书、快手、视频号同名） 大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...
OCR文字识别—基于PP-OCR模型实现ONNX C++推理部署
概述 PaddleOCR 是一款基于 PaddlePaddle 深度学习平台的开源 OCR 工具。PP-OCR是PaddleOCR自研的实用的超轻量OCR系统。它是一个两阶段的OCR系统，其中文本检测算法选用DB，文本识别算法选用CRNN，并在检测和识别模块之间添加文本方向分类器&a…...
国产3D CAD将逐步取代国外软件
在工业软件的关键领域，计算机辅助设计（CAD）软件对于制造业的重要性不言而喻。近年来，国产 CAD 的发展态势迅猛，展现出巨大的潜力与机遇，正逐步改变着 CAD 市场长期由国外软件主导的格局。 国产CAD发展现状 …...
GoLand 如何集成 Netty？
目录 1.回答问题： 2.以下是实现类似 Netty 功能的步骤： 2.1 实现基本的网络通信功能： 3. 使用 Go 的第三方库实现 Netty 功能 4.实现类似 Netty 的事件循环： 5. 运用场景： 1.回答问题： 要在 GoLand 中…...
C++中 为什么要把基类指针指向子类对象？
为什么要把基类指针指向子类对象？ 1）实现多态性 动态绑定行为：通过基类指针指向子类对象，可以利用 C 的多态机制。当基类中有虚函数，并且子类重写了这些虚函数时，通过基类指针调用虚函数，实际调…...
2025年第三届“华数杯”国际赛A题解题思路与代码（Matlab版）
游泳竞技策略优化模型代码详解（MATLAB版） 第一题：速度优化模型 本部分使用MATLAB实现游泳运动员在不同距离比赛中的速度分配策略优化。 1. 模型概述 模型包含三个主要文件： speed_optimization.m: 核心优化类plot_speeds.m: …...
做一个 简单的Django 《股票自选助手》显示 用akshare 库（A股数据获取）
图： 股票自选助手 这是一个基于 Django 开发的 A 股自选股票信息查看系统。系统使用 akshare 库获取实时股票数据，支持添加、删除和更新股票信息。 功能特点 支持添加自选股票实时显示股票价格和涨跌幅一键更新所有股票数据支持删除不需要的股票使用中…...
深入探索 ScottPlot.WPF：在 Windows 桌面应用中绘制精美图表的利器
一、ScottPlot.WPF 简介 ScottPlot.WPF 是基于 ScottPlot 绘图库专门为 Windows Presentation Foundation (WPF) 框架量身定制的强大绘图组件。它无缝集成到 WPF 应用程序中，为开发者提供了一种简洁、高效的方式来可视化数据，无论是科学研究中的实验数据展示、金融领域的行情…...
Spring bean的生命周期和扩展
接AnnotationConfigApplicationContext流程看实例化的beanPostProcessor-CSDN博客，以具体实例看bean生命周期的一些执行阶段 bean生命周期流程 生命周期扩展处理说明实例化:createBeanInstance 构造方法， 如Autowired的构造方法注入依赖bean 如UserSer…...
【Docker】docker compose 安装 Redis Stack
注：整理不易，请不要吝啬你的赞和收藏。 前文 Redis Stack 什么是？ 简单来说，Redis Stack 是增强版的 Redis ，它在传统的 Redis 数据库基础上增加了一些高级功能和模块，以支持更多的使用场景和需求。Redis…...
)
Life Long Learning（李宏毅）机器学习 2023 Spring HW14 (Boss Baseline)
1. 终身学习简介 神经网络的典型应用场景是，我们有一个固定的数据集，在其上训练并获得模型参数，然后将模型应用于特定任务而无需进一步更改模型参数。 然而，在许多实际工程应用中，常见的情况是系统可以不断地获取新数据，例如 Web 应用程序中的新用户数据或自动驾驶中的…...
JavaEE之线程池
前面我们了解了多个任务可以通过创建多个线程去处理，达到节约时间的效果，但是每一次的线程创建和销毁也是会消耗计算机资源的，那么我们是否可以将线程进阶一下，让消耗计算机的资源尽可能缩小呢？线程池可以达到此效果&a…...
)
错误修改系列---基于RNN模型的心脏病预测(pytorch实现)
前言 前几天发布了pytorch实现，TensorFlow实现为：基于RNN模型的心脏病预测(tensorflow实现)，但是一处繁琐地方 一处错误，这篇文章进行修改，修改效果还是好了不少；源文章为：基于RNN模型的心脏病…...
修改之前的代码使得利用设备树文件和Platform总线设备驱动实现对多个LED的驱动【只是假想对LED进行驱动,并没有实际的硬件操作】
引言 在下面这篇博文中： 利用Linux的Platform总线设备驱动实现对多个LED的驱动【只是假想对LED进行驱动,并没有实际的硬件操作】 我们利用Platform总线设备驱动的思想实现了对多个LED的驱动。 Platform总线设备驱动以及其它的总线设备驱动都将驱动分成了三个部分…...
从CentOS到龙蜥：企业级Linux迁移实践记录（龙蜥开局）
引言： 在我们之前的文章中，我们详细探讨了从CentOS迁移到龙蜥操作系统的基本过程和考虑因素。今天，我们将继续这个系列，重点关注龙蜥系统的实际应用——特别是常用软件的安装和配置。 龙蜥操作系统（OpenAnolis&#…...
多云架构，JuiceFS 如何实现一致性与低延迟的数据分发
随着大模型的普及，GPU 算力成为稀缺资源，单一数据中心或云区域的 GPU 资源常常难以满足用户的全面需求。同时，跨地域团队的协作需求也推动了企业在不同云平台之间调度数据和计算任务。多云架构正逐渐成为一种趋势，然而该架构下的数…...