diff算法

最新推荐文章于 2023-05-04 22:56:33 发布
最新推荐文章于 2023-05-04 22:56:33 发布
阅读量252 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54581080/article/details/126058189
版权

请阐述vue的diff算法

diff的话就是比较两颗树

当组件创建或者更新的时候，vue会执行内部的updete函数，该函数使用render函数生成虚拟dom树，将新旧两颗树进行对比，找到差异点，最终更新到真实dom.

对比差异的过程叫做diff,vue通过一个叫patch函数完成该过程（所以又叫patch算法） 

在对比时，vue采用深度优先 同层比较的方式进行对比。

判断两个节点是否相同时，是通过虚拟节点的key和tag (标签)来进行判断的，input是个例外，还要判断type是否相同。

具体来说，首先对根节点进行对比，如果相同则将旧节点关联的真实dom的引用挂到新节点上，然后根据需要更新属性到真实dom，然后再对比其子节点数组。如果不相同，则按照新节点的信息递归创建所有真实dom,同时挂载到虚拟节点上，然后移除掉旧的dom.

在对比其子节点数组时，vue对每个子节点数组使用了两个指针，分别指向头尾，然后不断的向中间靠拢来进行对比，这样做的目的是尽量复用真实dom,尽量少的去创建和销毁真实dom。如果发现相同，则进入和根节点一样的对比流程，如果不同，则移动真实dom到合适的位置。  

顺序是头-头比较  尾-尾比较 头-尾比较  头（新节点）-所有旧节点

这样一直递归的遍历下去，直到整棵树完成对比

一身风骨擎天破
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是虚拟DOM和diff算法?
Kodomo
11-19 664
一、什么是虚拟DOM 虚拟DOM其实就是相对于浏览器的真实DOM所渲染出来的一个用来描述真实DOM结构的JS对象
[算法]Diff算法
小钿钿不忘初心的博客
05-14 665
Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。 Diff算法有三大策略： Tree Diff Component Diff Element Diff 三种策略的执行顺序也是顺序依次执行。 Tree Diff 是对树每一层进行遍历，找出不同，如图1所示。 Component Diff 是数据层面的差异比较 如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：与)，按照原策略继续比较Virtual DO.
Diff算法
沛哥儿的专栏
08-19 278
Diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。
【Vue源码】Vue源码解析之DOM和diff算法（二）
阿卡内的博客
07-28 385
Vue源码解析之DOM和diff算法（二）
个人理解Vue的diff算法
最新发布
weixin_52099241的博客
05-04 255
diff算法的三个特点，以及diff节点比较的具体过程
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
diff:为了学习diff算法
04-16
《深入理解diff算法》 diff算法，源自Unix操作系统中的一个工具，用于比较两个文本文件或目录的差异。这个算法在软件开发、版本控制系统等领域有着广泛的应用，如Git、SVN等。本文将全面探讨diff算法的基本原理、...
Vue的diff算法详解和key作用(较详细)
01-20
Vue的diff算法详解和key作用 在前端开发中，Vue.js是一个非常流行的MVVM框架，它的核心特性之一是使用虚拟DOM（Virtual DOM）来优化页面更新。为了理解Vue的diff算法，首先需要了解DOM（Document Object Model）的...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
vue的diff算法知识点总结
08-27
Vue 的 Diff 算法是其虚拟 DOM 优化的核心，用于高效地对比新旧虚拟节点 (VNode) 集合，找出最小的变更并更新实际的 DOM 结构。在这个过程中，Vue 避免了不必要的DOM操作，提高了性能。 首先，虚拟节点 (VNode) 是 ...
【vue前端面试】key的作用与原理/虚拟DOM/diff算法原理/代码效果
sweethhheart的博客
02-05 709
本文中涉及了v-for中key的取值、虚拟DOM与真实DOM、diff算法原理等。
vue内部运行机制
梅花寺
10-30 725
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue底层之如何判断元素节点
qq_43618136的博客
11-29 415
isElementNode(node){ return node.nodeType === 1 }
vue中的虚拟DOM 和diff算法
weixin_56263402的博客
06-11 247
提到虚拟DOM就需要提一下vue的就地复用策略 vue的就地复用策略：就是尽可能的进行（同级别，同位置），对比虚拟dom进行对比，复用旧Dom结构，进行差异化更新 xuen
深入Vue内部原理（三）：Diff算法
qq_42062727的博客
07-25 586
虚拟 DOM 出现的背景：在 jQuery 时代，可以自行控制 DOM 操作的时机，手动调整，但是当项目很大时，操作 DOM 的复杂度就会上来，DOM 操作会很耗费性能，操作 DOM 就还需要考虑优化 DOM 操作，提升性能。《高性能JavaScript》这本书中说，把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。操作 DOM 后需要经过跨流程通信和渲染线程触发的重新渲染（重绘或者重排），在开发中，应尽量减少操作 DOM。而虚拟 DOM 出现后，更新 DOM 交给框架处理。
【vue】diff 算法详解
蜗牛的博客
12-20 1万+
diff算法详解
深入diff 算法
热门推荐
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-01 1万+
深入diff 算法 diff 作为 Virtual DOM 的加速器，其算法上的改进优化是React页面渲染的基础和性能保障，本节从源码入手，深入剖析diff算法。 React 中醉值得称道的莫过于Virtual DOM与diff的完美结合，尤其是其高效的diff算法，可以帮助我们在页面蔌渲染的时候，计算出Virtual DOM真正变化的部分，并只针对该部分进行的原生DOM操作，而不是渲染整个页面...
Vue3中diff算法的优化和乱序比对的实现-详细步骤（包看包会）
发果叁
06-24 1138
接上回说到，当老的虚拟节点的儿子是一个数组类型，新的虚拟节点的儿子也是一个数组类型，那么就会进行diff比较当前我们处理了几种特殊情况，从头比较，从尾比较，同序列需要挂载的情况，同序列需要删除的情况，我们处理这几种特殊情况的目的是后续能够尽可能少的比较，因为一些特殊的我已经先比完了，特殊情况我已经提前处理了。便于后续进行比较，这是一种优化手段。后续我们就要进行乱序比较。我们刚才乱序比对的过程中呢，cd其实顺序是没有动的，但是我们还是一个一个的找，然后进行插入，每一项我们都做了倒序插入，其实我们刚才可以根据刚
深入理解React diff算法：实现与优化
"React diff算法的实现示例" React diff算法是React框架中用于优化UI更新性能的关键技术。它通过对比新旧虚拟DOM树（VTree）以确定最小的DOM变更，从而避免不必要的DOM操作，提升应用性能。本文将探讨React diff...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值