图解vue的diff算法

最新推荐文章于 2024-04-07 09:46:32 发布
最新推荐文章于 2024-04-07 09:46:32 发布
阅读量262 收藏 2
点赞数 1
文章标签： 算法 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bermida/article/details/120800583
版权

每次修改或新增数据都要创建渲染一整个真实dom的话要开销大量性能，所以vue用diff算法来实现局部更新。

真实dom和虚拟dom

渲染完真实dom以后，会根据真实dom生成一个虚拟dom

在这里插入图片描述

当树上某个VNODE节点的数据发生改变后，会生成一个新的虚拟dom

在这里插入图片描述

把新旧两个虚拟dom进行对比，把两者的差异更新到真实dom上并渲染这个需要更新的部分，这样就避免了重新渲染一整棵树
然后把旧的虚拟dom删除，新的虚拟dom就成为了下一次要进行对比的旧虚拟dom

虚拟dom的对比过程对树上的节点VNODE进行了遍历对比，而且只会进行同层的比较，先把每一层的比较完才会去对比下一层次的节点

在这里插入图片描述

patch函数

vue认为在不看后代节点的情况下(也就是先不看下一层)，两个节点如果key和tag都相同，那这两个节点就是相等的

patch函数就是在这种情况下，对两个节点进行判断

如果不相同，就没有往下一层比较的必要了，把真实dom上的对应的节点的树结构直接替换成新的VNODE(这样做可以尽可能减少比较的次数)
如果相同，就进行更深层的对比，执行patchVnode函数

patchVnode函数

更新的过程中会根据新旧VNODE有子节点(children)还是有文本(text)来做不同的操作，总共有4种情况：

  1. 旧VNODE有子节点，新VNODE没有：直接删掉真实dom的子节点
  2. 旧VNODE没有子节点，新VNODE有子节点：创建新VNODE的子节点，添加到真实dom上
  3. 新/旧VNODE都有文本节点：如果文本内容不同，直接把真实dom的文本改成新VNODE的文本
  4. 新/旧VNODE都有子节点：把两者的children数组单独拎出来对比，对比的过程如下

updateChildren函数

对于这两个子节点数组，会分别声明两个指针指向头尾
在头尾指针不错位的情况下(即头指针始终不到尾指针的右边，尾指针始终不到头指针的左边)
四个头尾指针指向的子节点的对比分成5种

  1. 旧VNODE的头指针和新VNODE的头指针，相等的话指针向中间靠拢，把对应的节点移到相应位置

  2. 旧VNODE的头指针和新VNODE的尾指针，相等的话指针向中间靠拢，把对应的节点移到相应位置

  3. 旧VNODE的尾指针和新VNODE的头指针，相等的话指针向中间靠拢，把对应的节点移到相应位置

  4. 旧VNODE的尾指针和新VNODE的尾指针，相等的话指针向中间靠拢，把对应的节点移到相应位置

在这里插入图片描述

  1. 如果以上4种情况都不符合

拿到新VNODE的头指针，把整个旧VNODE的子节点数组进行遍历，目的是尽可能找到相等的节点，减少创建新节点

  • 如果找到了，就对这个节点进行移动
  • 如果遍历结束还没找到，就不得不创建，创建后根据新VNODE插入对应位置

一旦新/旧VNODE的头尾指针错位了，那就意味着这个结点数组遍历完成
如果新节点比旧结点先遍历完，把真实dom的多余节点删除
如果旧结点比新节点先遍历完，把剩余的新节点创建并添加到真实dom中

图解如下：(假设旧VNODE子节点为[1, 2, 3, 4, 5]，新VNODE子节点为[1, 2, 6, 5, 3, 4])

  1. 对比两个头指针指向的节点，发现相同，把对应的节点移到相应位置，指针向右走一步

在这里插入图片描述

  1. 对比两个头指针指向的节点，发现相同，把对应的节点移到相应位置，指针向右走一步

在这里插入图片描述

  1. 前四种比较没有找到相同的，以新VNODE子节点的头指针指向的节点为基准，遍历旧VNODE子节点，发现没找到，创建并插入到正确位置

在这里插入图片描述

  1. 对比旧的尾指针和新的头指针，发现相同，把对应的节点移到相应位置，指针向中间走一步

在这里插入图片描述

  1. 对比两个头指针指向的节点，发现相同，把对应的节点移到相应位置，指针向右走一步

    在这里插入图片描述

  2. 对比两个头/尾指针指向的节点，发现相同，把对应的节点移到相应位置，指针再走下去就错位了，结束对比
    在这里插入图片描述

口喷
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【vue】diff 算法详解
蜗牛的博客
12-20 1万+
diff算法详解
十分详细的diff算法原理解析
2201_75408960的博客
02-06 273
vue虚拟dome+diff算法
虚拟DOM和 Diff算法
cyz_hd的博客
09-21 329
虚拟DOM 1、用js来模拟DOM中的节点。传说中的虚拟DOM。 虚拟dom实现过程： 1.根据真实dom产生虚拟dom? 虚拟dom?就是一个特殊对象（经过一些处理能产生真实dom） 2.进行编译解析 3.将虚拟dom 变成真实dom 也就 挂载 4.数据发生变化 产生新的虚拟dom 5、将数据变化后的虚拟dom 和之前的虚拟dom 通过differ 算法 进行比对 6、比对之后更新视图 一样的不变 不一样重新渲染 <!DOCTYPE html> <html lang="en"
diff算法原理解析
qq_43260366的博客
07-20 472
使用js对象模拟的页面dom结构被称为虚拟DOM；
探秘 `Differ`：一个高效、灵活的文本差异对比库
最新发布
gitblog_00011的博客
04-07 415
探秘 Differ：一个高效、灵活的文本差异对比库 项目地址:https://gitcode.com/CL-lau/Differ 在这个快速发展的开源世界里，我们经常需要处理和比较文本之间的差异，无论是代码审查，日志分析还是文档编辑。今天，我们要向大家推荐一款强大的文本差异对比库——Differ，它能帮助开发者以直观的方式展示文本间的异同。 项目简介 Differ 是由 CL-lau 开发的一个 ...
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
vue的diff算法知识点总结
08-27
Vue 的 Diff 算法是其虚拟 DOM 优化的核心，用于高效地对比新旧虚拟节点 (VNode) 集合，找出最小的变更并更新实际的 DOM 结构。在这个过程中，Vue 避免了不必要的DOM操作，提高了性能。 首先，虚拟节点 (VNode) 是 ...
vue diff算法总结adf
05-04
vue diff算法总结adf
解析Vue 2.5的Diff算法
08-28
Vue 2.5 的 Diff 算法是其更新虚拟 DOM 以实现高效视图更新的关键部分。在 Vue 中，Virtual DOM 是一种轻量级的数据结构，它模拟了实际的 DOM，允许框架在内存中比较两个不同的树，然后只对最小化的改动进行实际的 ...
了解Diff算法
LiYangCSDN的博客
10-03 449
Diff算法通常用于版本控制系统（如Git）中，用于比较不同版本的代码或文本文件，并生成补丁文件，以便能够将更改应用到其他版本上。Diff算法的主要思想是通过比较两个文本之间的行或字符来查找差异，然后为每个差异分配一个操作（插入、删除或修改）。Diff算法的应用领域广泛，不仅仅限于文本和代码的比较。LCS算法则通过寻找两个文本之间的最长公共子序列，尽可能地找到相同的部分，并将不同的部分划分为删除或插入操作。贪婪算法通过比较两个文本的行或字符，尽可能地匹配相同的部分，并将不同的部分划分为删除或插入操作。
Vue源码解析：虚拟DOM加Differ算法之一锤定音（一）
lee前端技术站
06-25 703
之前我们讲过，Vue的特点之一是数据驱动视图，那么今天我们来讲讲Vue的另一特点虚拟dom。 虚拟Dom基础 1、Vue的虚拟dom是什么？ 简单来讲，Vue的虚拟dom就是一个JavaScript对象，用对象的方式去描述dom的结构。 <div class="a" id="b">我是内容</div> { tag:'div', // 元素标签 attrs:{ // 属性 class:'a',
Vue2 - diff 原理（动图演示）
qq_40147756的博客
01-03 1526
Vue2 - diff 原理（动图演示），render 函数，patch 函数。
vue的diff算法详解（看完谁问都不慌了）
常来常往，共同成长
01-12 2791
diff算法是一种通过同层的树节点进行比较的高效算法，其有两个特点： 1.比较只会在同层级进行, 不会跨层级比较 2.在diff比较的过程中，循环从两边向中间比较 diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧VNode节点比较
vue3手写diff算法（图解+例子+详细注释）
weixin_46098276的博客
09-18 4358
什么时候用到diff算法？diff算法的用途是什么？使用v-for不利用key标识和利用key标识的区别是什么？本文有图解和例子说明，带你一步步手写实现diff算法的核心原理！！！
Vue2 diff 算法图解
weixin_43359503的博客
04-07 560
看 Vue 2 的源代码已经很久了，从用 flow 到如今使用 TypeScript，我每次都会打开它的源代码看一看，但是每次都只看到了数据初始化部分，也就是的阶段，对于如何生成 VNode（Visual Dom Node， 也可以直接称为 vdom） 以及组件更新时如何比较 VNode（diff）始终没有仔细研究，只知道采用了双端 diff 算法，至于这个双端是怎么开始怎么结束的也一直没有去看过，所以这次趁写文章的机会仔细研究一下。在我的理解中，diff 指代的是，即新旧内容之间的区别计算；
Myers 差分算法 —— Android DiffUtils 之实现（二）
Android 开发架构
02-14 1050
上一篇看这里： Myers 差分算法 (Myers Difference Algorithm) —— DiffUtils 之核心算法（一） 我们在上文简单的介绍了下 Myers 差分算法的原理，至少知道了他是怎么一回事，我们知道寻找最远的点方法有两个，一个是采用最短路径或者广度优先搜索算法，另一种是使用动态规划。 我们来看一下 Google 是怎么做的。 DiffUtil 采用的策略 首先，先...
vue diff 算法 阮一峰
06-02
Vue 的 diff 算法实现主要是基于 Virtual DOM，它的核心思想是通过比较新旧 Virtual DOM 树的差异，最终只更新必要的部分，从而减少 DOM 操作的次数，提升性能。 具体实现上，Vue 的 diff 算法采用的是深度优先遍历...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值