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开发,专为满足用户监控特定目录下文件和子目录变化的需求。无论是为了保障系统安…

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

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

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

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

CentOS 7安装、卸载MySQL数据库

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

【Qt】:事件的处理

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

第四百六十二回

文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容,本章回中将介绍readMore这个三方包.闲话休提,让我们一起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结点拥有的路的条数,以及能够找到的救援队的数目…

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

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

【verilog】 reg与寄存器的关系

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

linux shell脚本编写(2)

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

(一)Jetpack Compose 从入门到会写

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

PCL中VTK场景添加坐标系轴显示

引言 世上本没有坐标系,用的人多了,便定义了坐标系统用来定位。地理坐标系统用于定位地球上的位置,PCL点云库可视化窗口中的坐标系统用于定位其三维世界中的位置。本人刚开始接触学习PCL点云库,计算机图形学基础为零,…

基于Python的卷积网络的车牌识别系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

leetcode不同路径

. - 力扣(LeetCode) 62. 不同路径 中等 相关标签 相关企业 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下…

04_UART串口发送数据

1.配置芯片,如果PA9,PA10的UART引脚被占用,会自动进行重映射 2.代码 int main(void) {uint8_t temp[]"test";/* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration--------------------------------------------------------*…

Unity Shader 流光 边缘光

前言 Unity2021.3.23 一、实现原理 Time控制UV的变化,再采样一张流光贴图.即可实现流光效果。 二、效果及源码展示 1.流光效果 效果描述: 1.边缘光(菲尼尔), 2.从上到下扫描光. 效果图如下: 代码如下: Shader "Unlit/ScanCode" {Properties{_MainTex ("T…

JavaEE企业开发新技术5

目录 2.18 综合应用-1 2.19 综合应用-2 2.20 综合应用-3 2.21 综合应用-4 2.22 综合应用-5 Synchronized : 2.18 综合应用-1 反射的高级应用 DAO开发中,实体类对应DAO的实现类中有很多方法的代码具有高度相似性,为了提供代码的复用性,降低…

MoneyPrinterTurbo-利用AI大模型,一键生成高清短视频

MoneyPrinterTurbo-利用AI大模型,一键生成高清短视频 在今天的信息爆炸的时代,短视频已经成为最受欢迎的信息传递方式之一。无论是分享生活瞬间,还是传递重要信息,短视频都是最直观,最具影响力的手段。但是&#xff0…