34.Vue diff算法的原理

最新推荐文章于 2024-06-01 18:05:44 发布
最新推荐文章于 2024-06-01 18:05:44 发布
阅读量999 收藏 8
点赞数 38
分类专栏： 前端面试Vue篇 文章标签： 算法 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_74217055/article/details/136634663
版权

 1.diff算法的流程

2.UpdateChildren（diff算法的核心） 

在diff算法中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

 

 

示例

在进行虚拟dom比对时进行首尾比对，采用的是首位指针比对法进行比对，不管是新节点还是旧结点都会有首位指针（oldS ，oldE，newS，newE）

首先oldS和newS做比对

 没有比对成功，则oldS和newE做比对，比对成功，但是真实DOM中，a结点在第一个位置，则将其移动到第四个位置

 因为上次比对成功，所以oldS向右移动一位，newE向左移动一位

 开始第二轮比对，oldS和newS做比对

 比对成功，在新的虚拟结点中，b结点在第一个位置，所以移动b结点到第一个位置

因为上一次比对成功，oldS向右移动一位，newS向右移动一位 

 开始第三轮比对，oldS和newS相比对

比对成功，但是新虚拟结点在第二个位置，所以将旧的真实DOM的c结点移动到二个位置，同时newS和newE同时向右移动一位

此时oldE < oldS,比对结束，但新的虚拟结点多了一个d结点，则直接将多余的DOM元素直接添加到真实DOM中去，旧的真实DOM也就变成了新的真实DOM

 

叫我阿东就行
关注
  • 38
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的diff算法原理
老电影故事的博客
10-27 1万+
1. 为什么要用Diff算法 由于在浏览器中操作DOM是很昂贵的，频繁的操作DOM，会产生一定的性能问题，这就是虚拟DOM的产生原因。虚拟DOM本质上是JavaScript对象，是对真实DOM的抽象状态变更时，记录新树与旧树的差异，最后把差异更新到真正的DOM中。 即使使用了Virtual DOM来进行真实DOM的渲染，在页面更新的时候，也不能全量地将整颗Virtual DOM进行渲染，而是去渲染改变的部分，这时候就需要一个计算Virtual DOM树改变部分的算法了，这个算法就是Diff算法。 diff算
【Vue源码初探】五.diff算法原理
前端学习博客
10-11 2014
如果新节点的尾指针下一个没有节点，那就证明是头比头，继续在后面插入。
Vue 中 diff 算法原理
小草莓的博客
08-23 1427
如果两个节点不相同的话，那么直接删除老节点，然后创建新节点。如果是相同节点，那么会比较两个节点的差异，包括节点的 key 属性、tag 标签、事件等等；如果两个父节点相同的话，那么就比较儿子节点。比较子节点有以下4种情况：如果都是文本节点且不相等，直接将el文本节点更新为新节点的文本内容即可；如果老的有儿子，新的没儿子，直接删除老的儿子节点；如果老的没儿子，新的有儿子，那么就创造新的儿子节点，直接插入父节点中；如果两者都有子节点，则执行函数比较子节点。
Vue3diff算法原理和优化
radcb55226的博客
04-20 865
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
VUE DIFF算法之简单DIFF
王亮的博客
02-10 352
vue 简单diff原理讲解及实践
Vue diff算法
Grand.的博客
02-28 1446
Vue diff算法
【VUE】— diff算法原理
weixin_44761091的博客
04-14 2786
系列文章目录 【VUE】— watch侦听器原理 文章目录系列文章目录一、简介二、源码分析2.1 patch函数2.2 sameVnode2.3 patchVnode2.4 updateChildren三、vue3中对于diff算法的优化 一、简介 在vue中会维护一个和 DOM 节点对应的 vnode 对象。 vnode 的 children 数组中对应子节点的 vnode 对象，所以在 vue 中通过 vnode 和真实的 DOM 树进行映射，我们也称之为虚拟树。 正是有了虚拟树，当数据更新时。我们可以
一文搞懂Vue Diff算法
小王的技术库
12-14 1337
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue中的diff算法的原理
weixin_45799605的博客
06-01 122
vue中的diff算法的原理
详解vue的diff算法原理
08-27
主要介绍了详解vue的diff算法原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue的diff算法知识点总结
01-19
diff算法首先要明确一个概念就是diff的对象是虚拟dom，更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.children = children this.text = text ...
vue diff算法总结adf
05-04
vue diff算法总结adf
Leecode---347：输出前k个高频元素（使用unordered_map）
qq_41920323的博客
05-30 338
unordered_map实现输出前k个高频元素
算法每日一题（python,2024.05.24) day.6
L613Z的博客
05-27 611
数字比较型可以用双指针法寻找数字相同（或构成其他关系）的俩个数值（或其他类型），涉及到与数值有关的列表问题可以思考到sort()排序方法加以辅助。
Java多线程（04）—— 保证线程安全的方法与线程安全的集合类
2201_75456895的博客
05-30 1204
其含义为：CAS(M, A, B);M 表示内存，A 和 B 分别表示一个寄存器；如果 M 的值和 A 的值相同，则把 M 和 B 的值交换，如果不同，则无事发生；因为，因此可以基于 CAS 指令，不进行加锁，来编写线程安全代码；CAS 指令操作经过操作系统，JVM 的层层封装，最后 Java 标准库，提供了一些工具类，其中最主要工具类就是由于原子类内部用的是 CAS 实现，所以性能要比加锁实现高很多；在包下；
leetcode74搜索二维矩阵
最新发布
谜底的博客
06-01 457
输入：matrix = [[1,3,5,7],[10,11,16,20],[23,30,34,60]], target = 3。给你一个整数 target ，如果 target 在矩阵中，返回 true；否则，返回 false。
一千题，No.0037（组个最小数）
2301_76783671的博客
05-29 871
给定数字 0-9 各若干个。你可以以任意顺序排列这些数字，但必须全部使用。目标是使得最后得到的数尽可能小（注意 0 不能做首位）。例如：给定两个 0，两个 1，三个 5，一个 8，我们得到的最小的数就是 10015558。输入在一行中给出 10 个非负整数，顺序表示我们拥有数字 0、数字 1、……整数间用一个空格分隔。10 个数字的总个数不超过 50，且至少拥有 1 个非 0 的数字。现给定数字，请编写程序输出能够组成的最小的数。在一行中输出能够组成的最小的数。
分析和设计算法
日积月累
05-29 305
分析和设计算法
vue diff算法原理
05-09
Vue.js的diff算法是一种高效的虚拟DOM比较算法，用于比较新旧虚拟DOM之间的区别，从而最小化DOM操作，提高渲染性能。 Vue.js的diff算法基于以下两个假设： 1. 两个相同组件产生类似的DOM结构，不同组件产生不同的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值