【vue】diff 算法详解

news2025/7/16 3:06:13

一、diff算法是什么

diff算法是一种通过同层的树节点进行比较的高效算法

        diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图,所以 diff 算法本质上就是比较两个js对象的差异

特点

        1. 比较只会在同层级进行,不会跨层级比较

        2. 在diff比较的构成中,循环从两边向中间比较

应用场景

        diff算法在很多场景下都有应用,在vue中,用作于虚拟DOM渲染成真是DOM的新旧VNode节点比较

二、比较方式

diff整体策略为:深度优先,同层比较

        1. 比较只会在同层级进行,不会跨层级比较

        2. 比较的过程中,循环从两边向中间收拢

三、原理分析

数据改变 ----触发--> setter---触发--->Dep.notify ---通知订阅者---> patch(oldvnode, newvnode)

之后判断新旧两个节点是否为同类标签,如果不是同类标签就直接替换;如果是同类标签的话,进一步执行patchVnode()方法,在这个方法内部,也是需要先判断一下新旧虚拟节点是否相同,如果相等,就直接return;如果不相等就需要分情况来比对,比对的原则就是以新虚拟节点的结果为准,分为以下几种情况:

  1. oldvnode和newvnode都有文本节点---执行--->用新的文本节点替换旧文本节点
  2. oldvnode没有子节点,newvnode有子节点---执行--->添加新的子节点
  3. oldvnode有子节点,newvnode没有子节点---执行--->删除旧的子节点
  4. oldvnode和newvnode都有子节点---执行--->updateChildren()方法

updateChildren

同级比对 --- 减少比对次数,可以最大化的提高比对性能

首尾指针法

        ①依次比对,当比较成功后退出当前比较

        ②渲染结构以newVnode为准

        ③每次比较成功之后start点和end点向中间靠拢

        ④当新旧节点中有一个start点跑到end点右侧时终止比较

        ⑤如果都匹配不到,则旧虚拟DOM key只去比对新虚拟DOM的key值,如果key相同则复用,并移动到新虚拟DOM的位置

比对顺序

        首先,旧虚拟节点的start和新虚拟节点的start做比对,如果没有比对成功,就用旧虚拟节点的start和新虚拟节点的end做比对

        如果依旧没有比对成功,就用旧虚拟节点的end和新虚拟节点的start做比对,如果依旧没有比对成功,旧虚拟节点的end会和新虚拟节点的end做比对

        比对原则就是依照以上顺序依次比较

        当比对成功,就退出当前比对,渲染结果会以新虚拟节点的结果为准

        每次比对成功后,比对成功的start会向右侧移动,end会向左侧移动。在移动的过程中,当start点跑到end点右侧的时候就终止比较

比对实例

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

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

相关文章

原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧

目录 1. 案例分析💨 2. 适配设备 💨 3. 背景滚动💨 4. hero操作💨 5. 敌机的创建与运动💨 6. 子弹的创建与运动💨 7. 碰撞检测💨 8. 统计得分💨 9. 设置开始与结束界面&…

疫情散去想看电影,使用css3动画实现一个阿凡达2完美开场

在历经了艰苦卓绝的3年抗疫后,疫情终于还是来了,很多小伙伴变成了小洋人酸奶,我相信过不了多少天,疫情终将散去,那个时候就可以和家人走进电影院啦。 今天用css布局一个阿凡达2的影院场景,提前过一过瘾。 目…

《uni-app》表单组件-form表单

本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多…没有本质上的区别~ 《uni-app》表单组件-form表单一. 简介二. 基础用法三. submit事件四. reset事件五. repor…

Tomcat安装配置及IDEA配置方法【亲测有效】

Tomcat安装配置及IDEA配置1.下载Tomcat2.配置Tomcat环境变量3.安装Tomcat4.启动Tomcat5.测试Tomcat6.IDEA配置Tomcat1.下载Tomcat Tomcat9官网下载地址 选择自己需要的版本,一般选择Windows 64位压缩包版本: 下载完后安装解压即可,解压后的…

如何使用nvm切换node版本

我比较懒惰,如非必要,不喜欢npm版本切换来切换去,感觉浪费我编程的时间.后来发现,现在偷的懒都是为将来的忙碌埋下的祸根. 言归正传,本文主要是讲解一下,如何使用nvm进行npm版本的切换. 工欲善其事必先利其器,我们先下载nvm;直接上下载链接(针对windows哈,毕竟我没mac本); 下载…

Code For Better 谷歌开发者之声——初识Web与谷歌,拉起兴趣之心。

个人名片: 博主:酒徒ᝰ. 个人简介:沉醉在酒中,借着一股酒劲,去拼搏一个未来。 本篇励志:程序是我的生命,但我相信爱她甚过爱我的生命。 目录一、了解谷歌浏览器1. 简介2.优点二、认识Web1. 简介2. 特点2. 网…

【云原生 | 21】Docker运行Web服务实战之Apache

作者简介:🏅云计算领域优质创作者🏅新星计划第三季python赛道第一名🏅 阿里云ACE认证高级工程师🏅 ✒️个人主页:小鹏linux 💊个人社区:小鹏linux(个人社区)欢…

【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

目录 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 二、使用uni-app获取定位的经纬度 三、 逆地址解析,获取精确定位 四、小提示 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 在浏览器搜索腾讯定位服务,找…

React(四) ——hooks的使用

🧁个人主页:个人主页 ✌支持我 :点赞👍收藏🌼关注🧡 文章目录⛳React Hooks💸useState(保存组件状态)🥈useEffect(处理副作用)🔋useCallback(记忆函数&#…

Sass 和 SCSS

▣Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。 Sass 是一款强化 CSS 的辅助…

使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」

文章目录前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口5.固定公网地址前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原…

微信小程序|基于小程序+云开发制作一个菜谱小程序

今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。 一、小程序1. 创建小程序</

【python】喜欢XJJ?这不得来一波大采集?

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 俗话说的好&#xff1a;技能学了~就要用在自己喜欢得东西上&#xff01;&#xff01; 这我不得听个话~我喜欢小姐姐&#xff0c;跳舞的小姐姐 这不得用python把小姐姐舞采集下来~嘿嘿嘿 完整源码、素材皆可点击文章下方名片…

Java web学生信息管理系统(jsp)

&#x1f95e;目录 &#x1f36c;1 概述 1.1课程设计目的 1.2预备知识 JAVAWeb&#xff1a; MySQL&#xff1a; JSP&#xff1a; 1.3实训的内容和要求 &#x1f36c;2 需求分析 2.1系统目标 2.2功能分析&#xff1a; 2.3开发环境&#xff1a; &#x1f36c;3 设计步…

大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】

一&#xff1a;案例效果 本次案例我们分析一下数据可视化页面最常见的热点图是如何实现的&#xff0c;其原理并不复杂&#xff0c;只需要用到CSS3动画属性 animation 以及 keyframe 关键帧即可&#xff0c;重点是向外扩散的环如何布局比较合适&#xff0c;以及每个环怎么扩散何…

HTML 5标签搭建页面结构--1

本文标签: HTML基本语法 排版标签 媒体标签 链接标签 文章目录 前言 一、基础认识 1.认识网页 2.微博标准 3.web标准的构成 4.小结 二、HTML基本结构解读 2.HTML标签及结构 1.标签的结构: 2.排版标签: 2.文本格式化标签: 3.媒体标签: 1.图像相关标签: 2.图片标签的 title …

JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)

文章目录1.1 第一章 初入宗门1.2 第二章 直接量1.3 第三章 数据类型1.4 第四章 数据类型扩展内容:1.5 第五章 基础考核1.6 第六章 何老1.7 第七章 对象数据类型1.8 第八章 对象的取值1.9 第九章 循环遍历的奥妙小结&#xff1a;For 循环1.10 第十章 对象内容的遍历1.11 第十一章…

30个题型+代码(冲刺2023蓝桥杯)(上)

愿意的可以跟我一起刷&#xff0c;每个类型做1~5题 &#xff0c;4月前还可以回来系统复习 目录 &#x1f34e;注意 &#x1f33c;前言 &#x1f33c;一&#xff0c;前缀和 &#x1f44a;&#xff08;一&#xff09;3956. 截断数组 &#x1f333;Time Limit Exceeded &a…

如何用python代码,更改照片尺寸,以及更换照片底色

前言 python浅浅替代ps&#xff1f;如何用代码来p证件照并且更换底色&#xff1f; 唉&#xff0c;有个小姐姐给我扔了张照片&#xff0c;叫我帮忙给她搞成证件照的尺寸还得换底色&#xff0c;她说自己忙的很 可惜电脑上没有ps只有pycharm&#xff0c;没得办法只能来试试看代…

没有关系的话,那就去建立关系吧

今天给大家分享一道链表的好题--链表的深度拷贝&#xff0c;学会这道题&#xff0c;你的链表就可以达到优秀的水平了。力扣 先来理解一下题目意思&#xff0c;即建立一个新的单向链表&#xff0c;里面每个结点的值与对应的原链表相同&#xff0c;并且random指针也要指向新链表中…