vue中diff算法理解

已于 2022-11-01 21:23:29 修改
阅读量484 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue.js 前端 javascript
于 2022-11-01 19:20:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46349935/article/details/127638705
版权
本文介绍了虚拟DOM的概念以及Vue.js中的diff算法。diff算法用于比较新的虚拟DOM和旧的虚拟DOM，找到差异并生成补丁，以最小的代价更新DOM。文章详细描述了diff过程中的节点比较、同级比对以及key值优化等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

了解diff算法前我们需要先了解什么是Virtual

一.什么是Virtual DOM(虚拟DOM)

Virtual DOM(虚拟DOM)是Real DOM(真实DOM)的JS对象 我们看下图方便理解

在这里插入图片描述(不会画图 只能借鉴一下了)
虚拟DOM 就把是 真实DOM的 标签名和标签属性和子标签以及文本节点 都以js的对象的样式呈现

二.了解diff算法

diff算法（个人简单理解）：diff算法会将 新的虚拟DOM 和 旧的虚拟DOM 进行对比 找出差异 将差异封装为补丁（如果存在无差异的虚拟节点，旧虚拟节点将会得到复用），通过方法的循环遍历然后打到 真实DOM 上，以差异化最小的代价去操作DOM，
先上图

在这里插入图片描述图中标注的真实DOM对应右边虚拟DOM
一旦我改变真实DOM的文本内容 就会生成一个新的虚拟DOM(切记如果修改真实DOM文本后 就会立即执行deff算法 以最小化进行更新视图)
请添加图片描述diff算法本质就是找出新旧虚拟DOM的差异然后最小化的对视图进行更新

1.数据改变就会触发deff算法中setter方法 间接触发Dep.notify方法 然后通知到各使用方执行patch方法(patch方法就是比较新旧虚拟节点的差异 将差异包装成一个补丁 然后打在真实DOM所需要的地方)
2.首先执行isSameVnode判断这两个是否为同类标签如果不是同类标签则直接替换
3.如果是同类标签则执行patchVonde方法 先判断是新旧虚拟节点是否相同 相同则直接return
4.如果新旧虚拟节点不同 则分为4中情况 如图左侧所示
5.当oldvnode和newvnode都有子节点时 就会执行updataChildren updataChildren 使用同级比对 在同级比对时会采用首位指针法来对比子节点 每次oldvnode和newvnode子节点比对成功时 真实DOM的节点 以newvnode的子节点排序为标准 都会对真实DOM的节点进行操作 然后渲染到页面中(如下图这 这也就相当执行了大概4次DOM操作 3次innerText操作 1次creat和append的DOM操作 如果想减少DOM操作 那么我们就要用到key值操作了 key值操作我们下章再讲)
在这里插入图片描述
本笔记在该观看此视频获取灵感之后创作 可以点击进行观看

简述对于Vue的diff算法理解
youhebuke225的博客
05-26 524
Vue 的 diff 算法，也称为“虚拟 DOM 的差异算法”或“Reactivity System”，是 Vue.js 框架中一个核心且高效的部分，它允许 Vue 在不需要重新渲染整个 DOM 的情况下，通过最小化地更新 DOM 来实现视图更新。总结来说，Vue 的 diff 算法通过对比新旧虚拟 DOM 之间的差异，并只更新需要变化的 DOM 部分，实现了高效的视图更新。Vue 的 diff 算法主要关注的是如何高效地找出两个虚拟 DOM 树之间的差异，并只更新需要变化的部分。
Vue 中的 diff 算法
最新发布
yousuotu的博客
03-25 1088
第三次循环中，发现E没有找到，这时候只能直接创建新的真实节点 E，插入到第二次创建的 C 节点之后。之间的所有节点，也就是节点F，直接创建 F 节点对应的真实节点放到 B 节点后面。后创建了 A 的真实节点，插入到前一次创建的 E 节点后面。后创建了 C 的真实节点插入到第一次创建的 D 节点后面。后创建了 B 真实节点 插入到前一次创建的 A 节点后面。第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为。
详解vue的diff算法
weixin_34319817的博客
05-19 860
前言 目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我...
Vue中diff算法的理解
WindRunnerMax
08-09 2523
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。 虚拟DOM diff算法的基础是Virtual DOM，Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点称为V
vue的diff算法理解
weixin_45290022的博客
01-27 175
diff算法作用： 用来修改dom的一小段，不会引起dom树的重绘 diff算法实现的原理： diff算法将virtual dom的某个节点数据改变后生成的新的vnode与旧节点进行比较，并替换为新的节点，具体过程就是调用patch方法，比较新旧节点，一边比较一边给真实的dom打补丁进行替换 具体过程详解： 1：在采用diff算法进行新旧节点进行比较的时候，比较是按照在同级进行比较的，不会进行跨级比较 2：当数据发生改变的时候，set方法会调用dep.notify通知所有的订阅者watcher，订阅者
vue：怎么理解vue中的diff算法
weixin_37347069的博客
05-19 816
1.diff算法是虚拟DOM技术的必然产物，通过新旧虚拟DOM作对比（即diff)，将变化的地方更新再真实DOM上，另外也需要diff高效的执行对比过程，从而降低时间复杂度为O(n); 2.vue 2.x中为了降低watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方； 3.vue中diff执行的时刻是组件实力执行其更新函数时，它会对比上一个渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch; 4.diff过程整体遵循深度优先，同层比
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
[面试】你怎么理解Vue的diff算法？
有事儿私信。
09-14 569
在Vue中，diff算法是其框架进行高效渲染和更新的关键所在。本篇文章将介绍Vue的diff算法的基本原理、实现方法和优化策略。Vue中的diff算法是框架进行高效渲染和更新的关键所在。
Vue的diff算法详解和key作用(较详细)
01-20
为了理解Vue的diff算法，首先需要了解DOM（Document Object Model）的概念。 DOM是Web页面的结构模型，它是一个树形数据结构，表示了HTML或XML文档的所有元素。当浏览器解析HTML文档时，会构建DOM树，然后根据这个...
深入理解 Vue 的 Diff 算法：从原理到实现的完整剖析
qq_39279448的博客
12-09 1638
Vue 的 Diff 算法通过一系列优化（如双端比较、静态标记、Block Tree）将复杂度降低到接近O(n)，并结合实际场景进一步优化性能。核心思路是去除头尾重复的节点。其次便是采用了最长递增子序列来复用相对位置没有发生变化的节点，这些节点是不需要移动的，便能最快的复用和更新。
4.怎么理解vue中的diff算法?
weCat_s的博客
12-06 2033
怎么理解vue中的diff算法? 整体策略：深度优先，同层比较
vue中的diff算法
知之为知之，不知为不知
05-08 1866
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
Vue中diff算法详解
AI_huihui的博客
10-22 3233
首先带大家了解一下虚拟DOM概念 一、本质 虚拟DOM本质就是一个js对象，用来保存DOM关键信息。 二、概念 后缀名为.vue文件中的 template 里写的标签，都是模板，都会被vue处理成虚拟DOM对象来渲染显示在浏览器(真实dom页面)上。 内存中生成一样的虚拟DOM结构 项目中的DOM属性有很多个，我们无法很快知道什么属性改变，比如在template中的标签结构为： <template> <di...
虚拟DOM和deff算法
weixin_45213764的博客
06-24 1025
虚拟dom && diff算法 虚拟dom是什么？ 它是一个Object对象模型，用来模拟真实dom节点的结构 虚拟dom的使用基本流程 1.获取数据（ ajax fetch ） var data = { id: 1, name: '毛毛' } 创建vdom /* <div class = "box"> ...
deff算法
gkjvim的博客
05-21 571
虚拟DOM是一个轻量级的JavaScript对象树，它模拟了真实DOM的结构。diff算法就是用来比较这两棵树的差异，并计算出最小的操作集合来更新真实DOM。diff算法是一种用于比较新旧虚拟DOM树并找出它们之间差异的算法，以便最小化对实际DOM的操作。在像Vue这样的前端框架中，diff算法起着至关重要的作用，它能够提高应用程序的性能和用户体验。在Vue3中，diff算法得到了进一步的优化，例如通过引入Snabbdom中的一些策略来减少不必要的比较和操作，使得更新过程更加高效。
快速Diff算法之 最长递增子序列
qq_44376306的博客
11-30 899
vue3.0中也对dom-diff算法进行了优化，其中就用到了。在项目中，实际上我们编写的模板或者jsx语法会被转化为虚拟 DOM 节点，即 Virtual DOM，之后再将虚拟 DOM 节点渲染成实际的 DOM 节点，Virtual DOM 也会被组织成树形结构，即 Virtual DOM 树。对应的Virtual DOM也许你会有个问题，为什么要引入虚拟DOM，而不是直接把组件转换成正式DOM节点呢？
React之diff算法
楠姐的博客
10-18 646
diff算法的作用 计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。 传统diff算法 通过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，这个有多可怕呢？——如果要展示1000个节点，得执行上亿次比较。。即便是CPU快能执行30亿条命令，也很难在一秒内计算出差异。 React的diff算法 什么是调和？ 将Virtual DOM树转换成actual DOM树的最少操作的过程 称为 调和 。 什么是React diff
深入理解Vue的diff算法
"本文详细解析了Vue的diff算法原理，探讨了Vue如何在数据变化时高效地更新DOM。文章深入浅出地介绍了虚拟DOM的概念、diff的比较策略以及patch函数的核心功能。" Vue.js是一个流行的前端JavaScript框架，它采用虚拟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值