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种特性
在这里插入图片描述

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

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

相关文章

AndroidStudio 导出aar包,并使用

打包 1、确认当前选项是否勾选,如未勾选请先勾选。 2、勾选完成后重启Android Studio。 3、重启完成后,选中要打包的module 4、打包完成 使用 1.在项目中新建libs,放入aar文件。 2.修改配置 添加如下代码 flatDir {dirs("libs")}3.修改app…

MongoDB 使用

1 引用依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency>2 配置文件配置mongodb资料 # MongoDB连接信息 spring.data.mongodb.host 192.168.23.…

ESP32_IDF前端命令开发全过程

ESP32 IDF前端命令开发全过程 开端1. 创建新工程(create-project)2. 创建新组件(create--component)目前文件结构 3. 设置目标芯片4. 配置项目5. 编译工程6. 烧录程序7. 打开监视器8. 一次性编译烧录并打开监视器9. 擦除设备flash10. 查询内存剩余11. 清除编译文件 仅供本人查阅…

【位运算】Leetcode 消失的两个数字

题目解析 面试题 17.19. 消失的两个数字 算法讲解 我们将这两个数组异或在一起&#xff0c;最后的结果就是a ^ b(缺失的两个数字)的结果&#xff0c;这两个缺失的数字一定是不相同的&#xff0c;所以我们就寻找他们第一个比特位是1的那个位置&#xff0c;异或的原理是&#xf…

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

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

WordPress用户福音:Elementor Pro国产版替代方案,全新中文界面更懂你

如果你正在考虑创建自己的网站&#xff0c;那么在第一次谷歌搜索时&#xff0c;你可能已经看到了WordPress、Elementor和网站构建器这些专业名称。WordPress是最受欢迎的网站平台之一&#xff0c;这不难理解&#xff1a;它高度可定制&#xff0c;易于学习&#xff0c;而且是免费…

第十五届蓝桥杯 javaB组第三题

测试通过了90% 剩下10%不知道哪错了 思路&#xff1a;我想的是用map&#xff0c;k存第几个队列&#xff0c;value存每个子队列的长度&#xff0c;最后给value排序 第一个就最小的也就是是有效元素数量 考试只对了个案例&#xff0c;其它情况没测试。 复盘 回来后经过修改改…

3.00 版本来了!DolphinDB V2.00.12 V3.00.0 正式发布!

一文带你了解 DolphinDB 全新版本升级&#xff01; 本次更新后&#xff0c;3.00.0版本将成为 DolphinDB 的最新版&#xff0c;2.00.12版本变更为稳定版&#xff0c;此前发布的1.30.23版本将成为1.30系列的最后一个版本。接下来&#xff0c;带大家一起看看 DolphinDB V2.00.12 …

Android Studio通过修改文件gradle-wrapper.properties内容下载gradle

一、问题描述 在Android Studio中新建项目后会下载你所新建的项目的activity/gradle/wrapper目录下所配置的gradle-7.3.3-bin.zip包&#xff08;笔者的是该版本包&#xff09;&#xff0c;而大多数时候会下载失败&#xff0c;如下 二、解决办法 新建工程后&#xff0c;取消下…

使用 Fn Project 搭建无服务平台

目录 下载 脚本直接下载 下载可执行文件 上传 启动 Fn 服务 初始化 Fn 工程 创建 app 部署 function 调用 function JSON 入参 官方文档 下载 有两种下载方式 脚本直接下载 直接在服务器执行该命令即可 curl -LSs https://raw.githubusercontent.com/fnproject/…

10、【代理模式】通过引入一个代理对象来控制对原始对象的访问的方式。

你好&#xff0c;我是程序员雪球。 今天我们了解代理模式的原理、静态代理和动态代理的区别、Spring AOP 和动态代理的关系、代理模式的使用场景&#xff0c;以及用 Java 实现一个动态代理示例 一、代理模式的原理 代理模式是一种设计模式&#xff0c;它提供了一种通过引入一个…

【十一】MyBatis Plus 原理分析

MyBatis Plus 原理分析 摘要 Java EE开发中必不可少ORM框架&#xff0c;目前行业里最流行的orm框架非Mybatis莫属了&#xff0c;而Mybatis框架本身没有提供api实现&#xff0c;所以市面上推出了Mybatis plus系列框架&#xff0c;plus版是mybatis增强工具&#xff0c;用于简化My…

量子飞跃:从根本上改变复杂问题的解决方式

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨王珩 编译/排版丨沛贤 深度好文&#xff1a;1000字丨5分钟阅读 利用多功能量子比特的量子计算机已处于解决复杂优化问题的最前沿&#xff0c;例如旅行商问题&#xff0c;这是一个典型的…

虚良SEOPython脚本寄生虫程序源码

本程序&#xff0c;快速收录百度首页&#xff0c;3-5天就可以有流量&#xff0c;长期稳定&#xff0c;可以设置自动推送。 点这里 Python脚本寄生虫程序源码&#xff08;寄生虫电影脚本&#xff09; - 虚良SEO 模板可以自己修改&#xff0c;源码带模板标签说明&#xff0c;简…

AI大模型日报#0415:贾佳亚团队新作王炸、马斯克首款多模态大模型、ChatGPT to B

导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。标题: 融合ChatGPTDALLE3&#xff0c;贾佳亚团队新作开源&#xff1a;识图推理生图一站解决 摘要: 贾佳亚团队推出了多模态模型Mini-Gem…

day58 回文子串 最长回文子序列

题目1&#xff1a;647 回文子串 题目链接&#xff1a;647 回文子串 题意 统计字符串s中回文子串的数目 回文子串是正着读和倒过来读一样的字符串 子串是连续字符组成的一个序列 动态规划 动规五部曲 1&#xff09;dp数组及下标i的含义 dp[i][j] 表示 [s[i]&#xf…

转移插槽简介

4.3.4.转移插槽 我们要将num存储到7004节点&#xff0c;因此需要先看看num的插槽是多少&#xff1a; 如上图所示&#xff0c;num的插槽为2765. 我们可以将0~3000的插槽从7001转移到7004&#xff0c;命令格式如下&#xff1a; 具体命令如下&#xff1a; 建立连接&#xff1a;…

【读书笔记】自动驾驶与机器人中的SLAM技术——高翔

文章会对本书第五章节及以后章节进行总结概括。每日更新一部分。一起读书吧。 第五章——基础点云处理 重点&#xff1a;点云的相邻关系是许多算法的基础 5.1 激光雷达传感器与点云的数学模型 5.1.1激光雷达传感器的数学模型 雷达有两种&#xff1a;机械旋转式激光雷达&…

RocketMQ集群配置

我们集群部署采取采用2m-2s&#xff08;同步双写&#xff09;方式&#xff0c;每个Master配置一个Slave&#xff0c;有多对Master-Slave&#xff0c;HA采用同步双写方式&#xff0c;即只有主备都写成功&#xff0c;才向应用返回成功. 1、服务器环境 序号IP角色架构模式1192.16…

一文详解MES、ERP、SCM、WMS、APS、SCADA、PLM、QMS、CRM、EAM及其关系

经常遇到很多系统&#xff0c;比如&#xff1a;MES、ERP、SCM、WMS、APS、SCADA、PLM、QMS、CRM、EAM&#xff0c;这些都是什么系统&#xff1f;有什么功能和作用&#xff1f;它们之间的关系是怎样的&#xff1f; 今天就一文详细分享给大家。 10大系统之间的关系 ERP 和其他…