vue3第十九节(diff算法)

2024-04-12 08:52

本文主要是介绍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种特性
在这里插入图片描述

这篇关于vue3第十九节(diff算法)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/896672

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

康拓展开(hash算法中会用到)

康拓展开是一个全排列到一个自然数的双射(也就是某个全排列与某个自然数一一对应) 公式: X=a[n]*(n-1)!+a[n-1]*(n-2)!+...+a[i]*(i-1)!+...+a[1]*0! 其中,a[i]为整数,并且0<=a[i]<i,1<=i<=n。(a[i]在不同应用中的含义不同); 典型应用: 计算当前排列在所有由小到大全排列中的顺序,也就是说求当前排列是第

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

【数据结构】——原来排序算法搞懂这些就行,轻松拿捏

前言:快速排序的实现最重要的是找基准值,下面让我们来了解如何实现找基准值 基准值的注释:在快排的过程中,每一次我们要取一个元素作为枢纽值,以这个数字来将序列划分为两部分。 在此我们采用三数取中法,也就是取左端、中间、右端三个数,然后进行排序,将中间数作为枢纽值。 快速排序实现主框架: //快速排序 void QuickSort(int* arr, int left, int rig

poj 3974 and hdu 3068 最长回文串的O(n)解法(Manacher算法)

求一段字符串中的最长回文串。 因为数据量比较大,用原来的O(n^2)会爆。 小白上的O(n^2)解法代码:TLE啦~ #include<stdio.h>#include<string.h>const int Maxn = 1000000;char s[Maxn];int main(){char e[] = {"END"};while(scanf("%s", s) != EO