vue3第十八节(diff算法)

引言:

上一节说了key的用途,而这个key属性,在vue的vnode 中至关重要,直接影响了虚拟DOM的更新机制;

什么场景中会用到diff算法
如:修改响应式属性需要重新渲染页面,会重新执行render渲染函数返回新虚拟DOM,拿到新的虚拟DOM后,需要进行patch对比新旧虚拟DOM,在对比双方的子级节点,需要拿旧的虚拟DOM的子级新的虚拟DOM子级进行patchChildren比较双方子级元素的差异,并且双方子级都为数组的情况下(具有多个子级节点)就会使用到diff算法!

为什么要用diff算法呢?提高性能、提升加载渲染速度、最大限度的复用原DOM
主要为了对比对新旧Vnode的差异,将相同的节点数据复用,只找新增、修改虚拟DOM进行创建并插入**(提高性能),元素发生位置变化时,只需要找出哪些元素需要移动(减少元素移动次数)**;
若不比较新旧节点,则每次更新都先对旧节点进行卸载,再重新挂载新节点,都需要先根据标签名创建真实节点,再进行挂载,这样每次卸载或挂载都会造成页面重排重绘,造成性能浪费

vue3里面的DIFF

Vue3 引入了一个全新的编译策略和运行时优化,包括对 Diff 算法的改进。Vue3 的 Diff 算法带来了更好的性能和更少的内存消耗,主要得益于以下几点:

支持碎片化(Fragment)Vue3支持碎片化,即允许组件有多个根节点,这在Vue2中是只允许一个根节点。
静态节点提升Vue3在编译时会对静态节点进行提升,这些节点在更新时不会被重新创建,而是直接复用,从而减少渲染成本。
区块树(Block Tree)Vue3引入了区块树概念,它可以跳过静态内容,快速定位到动态节点,减少的对比次数。
编译时优化Vue3在编译时会对模板进行静态提升,将不会变化的节点和属性提取出来,避免在每次渲染时都重新创建。
双端比较优化Vue3继续使用了双端比较算法,但是采用的是Map 数据结构在细节上进行了优化,比如对于相同节点的处理更加高效。

Vue2 里面的 DIFF

Vue2 中的 Diff 算法,主要关注子节点的列表差异。它通过同级比较来工作,对新旧节点列表进行遍历,比较每个节点是否相同,然后根据需要进行创建、更新或移除操作。

同级比较:只比较同一层级的节点,不跨层级比较。
双端比较Vue2 的 Diff 算法采用双端比较策略,从列表的两端(头部和尾部)开始比较,以尽量减少节点的移动次数,通过splice函数进行数组操作,重写了数组的7中操作方法,有局限性。
更新策略:当头尾比较无法匹配时,Vue2 会尝试复用旧节点,通过更新节点的属性或子节点来匹配新的虚拟节点,同时将其移动到正确的位置,以减少 DOM 操作次数。

Vue2 的 Diff 算法有一些限制,比如:

同级比较:不会进行跨层级的节点比较,这可能导致一些不必要的DOM操作。
静态节点优化:对于静态节点,Vue2在构建虚拟DOM树时会有一些优化,但在更新时,这些优化不会重复利用。

最后
Vue3 的 Diff 算法在 Vue2 的基础上进行了多项优化,使得虚拟 DOM 的更新更加快速和高效。这些优化包括更高效的节点比较、静态节点提升、块树优化等,这些改进有助于减少渲染时间,提高应用的性能。
主要有以下5种特性
在这里插入图片描述

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

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

相关文章

为了执行SQL语句,MySQL的架构是怎样设计的

1. 把MySQL当个黑盒子一样执行SQL语句 上一讲我们已经说到,我们的系统采用数据库连接池的方式去并发访问数据库,然后数据库自己其实也会维护一个连 接池,其中管理了各种系统跟这台数据库服务器建立的所有连接 我们先看下图回顾一下 当我们的…

数据可视化-ECharts Html项目实战(12)

在之前的文章中,我们深入学习ECharts特殊图表中的矩形树图以及Echarts中高级功能的多图表联动。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。 数…

Directory Monitor:全方位监控文件系统变动的专业利器

目录 一、软件介绍 二、软件功能 三、软件特点 四、安装说明 五、使用说明 一、软件介绍 Directory Monitor是一款强大易用的实时文件系统监视工具,它由Michael Humpa开发,专为满足用户监控特定目录下文件和子目录变化的需求。无论是为了保障系统安…

C++中调用QML函数

在.qml中写一个函数 import QtQuick import QtQuick.Controls import MyObj 1.0Window {id: windowobjectName: "window"width: 480height: 480visible: truetitle: qsTr("Hello World")//目标函数function qmlFunc(i, s) {return "success"}Bu…

python与设计模式之工厂模式的那些事儿

一、工厂模式 工厂模式实现了按需创建的最佳模式,其目的是为了隐藏创建类的细节与过程,通过一个统一的接口来创建所需的对象。 话说没了皇位争夺权的皇三接到了一个外征的工作,始皇给了5个亿的经费让皇三组建一个军队。打权总是要进行武器采…

探索Python编程:5个实用技能示例及代码解析

Python作为一种流行且多功能的编程语言,被广泛应用于各种领域。本文将介绍Python编程中的五个实用技能 1. Web 开发 在Web开发中,我们可以使用Flask框架来快速构建Web应用程序。下面的代码示例展示了一个简单的Flask应用,当用户访问根路径时…

【Java开发指南 | 第二篇】标识符、Java关键字及注释

读者可订阅专栏:Java开发指南 |【CSDN秋说】 文章目录 标识符Java关键字Java注释 标识符 Java 所有的组成部分都需要名字。类名、变量名以及方法名都被称为标识符。 所有的标识符都应该以字母(A-Z 或者 a-z),美元符($&#xff0…

pyqt5使用matplotlib绘图

说明 在pyqt5中使用matplotlib步骤: 1、引入plt 2、引入FigureCanvas 3、生成figure 4、取得FigureCanvas 5、将FigureCanvas加入容器中 6、调用plt函数来绘图 代码 import sys # 1、引入plt import matplotlib.pyplot as plt import numpy as np # 2、引入Figur…

为什么阿里巴巴不让使用JDK自带的线程池?

阿里巴巴在《阿里巴巴Java开发手册》中建议开发者不要直接使用 java.util.concurrent.Executors 类中的静态工厂方法来创建线程池,而是推荐直接使用 ThreadPoolExecutor 类来实例化线程池,主要原因如下: 资源耗尽的风险: JDK内置的…

CentOS 7安装、卸载MySQL数据库

说明:本文介绍如何在CentOS 7操作系统下使用yum方式安装MySQL数据库,及卸载; 安装 Step1:卸载mariadb 敲下面的命令,查看系统mariadb软件包 rpm -qa|grep mariadb跳出mariadb软件包信息后,敲下面的命令…

【Qt】:事件的处理

系统相关 一.鼠标事件二.键盘事件三.定时器 事件是应用程序内部或者外部产生的事情或者动作的统称。在Qt中使用一个对象来表示一个事件。所有的Qt事件均继承于抽象类QEvent。事件是由系统或者Qt平台本身在个同的的刻友出的。当用广投下鼠标、敲下键盘,或者是窗口需要…

【C++】每日一题 48 旋转图像

给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 #include <vector> using namespace std;class Solution { public:void …

第四百六十二回

文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容&#xff0c;本章回中将介绍readMore这个三方包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的readMore是一个…

【团体程序设计天梯赛 往年关键真题 25分题合集 详细分析完整AC代码】(L2-001 - L2-024)搞懂了赛场上拿下就稳了

L2-001 紧急救援 最短路路径打印 样例 输入1 4 5 0 3 20 30 40 10 0 1 1 1 3 2 0 3 3 0 2 2 2 3 2输出1 2 60 0 1 3分析 用一遍dijkstra算法。设立 n u m [ i ] num[i] num[i]和 w [ i ] w[i] w[i]表示从出发点到i结点拥有的路的条数&#xff0c;以及能够找到的救援队的数目…

Websocket (帧格式, 握手过程, Spring 中使用 WebScoket 协议)

什么是 WebSocket 客户端 A 和客户端 B 的消息传播需要借助服务器的中转 (原因是内网不能给另一个局域网的内网直接联通, 需要借助服务器的外网做 “中介”) (NAT 地址转换) Http 协议 不支持实时通讯 (或者说不支持服务器主动推送数据给客户端) TCP 本身是具有服务器推送数据这…

【verilog】 reg与寄存器的关系

一、前言 在Verilog中经常用reg定义具有数据寄存功能的单元&#xff0c;但在verilog的使用中&#xff0c;并不代表其一定就是寄存单元&#xff0c;reg还能进行组合逻辑描述&#xff0c;并且在一些场景下&#xff0c;只能使用reg来申明变量。 二、reg型变量生成组合逻辑 在Ve…

Java 中文官方教程 2022 版(四十四)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html 调用方法 原文&#xff1a;docs.oracle.com/javase/tutorial/reflect/member/methodInvocation.html 反射提供了一种在类上调用方法的方式。通常&#xff0c;只有在非反射代码中无法将类的实例强制转换为…

linux shell脚本编写(2)

Shell: 命令转换器&#xff0c;高级语言转换成二进制语言。是Linux的一个外壳&#xff0c;它包在Lniux内核的外面&#xff0c;用户和内核之间的交互提供了一个接口。 内置命令&#xff1a;在shell内部不需要shell编辑 外置命令&#xff1a;高级语言要用shell转换成二进制语言 …

分析Quartz(v2.3.2)QuartzSchedulerThread.run核心方法

文章目录 前言一、QuartzSchedulerThread.run 前言 最近项目中的定时任务&#xff0c;用Quartz框架取代了。最近也在学习Quartz框架这方面的知识&#xff0c;但是看代码过程有很多难以理解的地方。项目中使用数据库来存储的任务&#xff0c;本篇文章就从QuartzSchedulerThread…

(一)Jetpack Compose 从入门到会写

基本概念 Compose 名称由来 众所周知&#xff0c;继承在功能拓展上表现的很脆弱&#xff0c;容易类、函数爆炸&#xff0c;通过代理和包装进行组合会更健壮。 Compose 意为组合&#xff0c;使用上也是把 Compose 函数以 模拟函数调用层级关系的方式 组合到一起&#xff0c;最终…