Vue2.x和Vue3.x渲染器的diff算法分别说一下

最新推荐文章于 2024-08-18 16:13:14 发布
最新推荐文章于 2024-08-18 16:13:14 发布
阅读量752 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/109035907
版权

简单来说，diff算法有以下过程

  • 同级比较，再比较子节点
  • 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
  • 比较都有子节点的情况(核心diff)
  • 递归比较子节点
  • 正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
  • Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅
  • 在创建VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升
LuckXinXin
关注
专栏目录
简述vue2.x 和 vue3.x 渲染器的 diff 算法 ？
youhebuke225的博客
05-31 373
Vue2.x 和 Vue3.x 的 diff 算法在核心思路上都是基于同层比较和节点复用的策略，但 Vue3.x 在实现细节和性能优化上做了更多的工作，使得其渲染性能更加出色。在实际使用中，Vue3.x 的性能提升对于大型应用或需要频繁更新 DOM 的场景尤为明显。
vue-vue2和vue3的diff算法
weixin_42855188的博客
04-12 3039
乱序部分，采用最长递增子序列的算法，最大递增子序列的作用就是通过新旧节点变化前后的映射，创建一个递增数组，这样就可以知道哪些节点在变化前后相对位置没有发生变化，哪些节点需要进行移动，如下图计算出E、F、Y、J 是不需要操作的节点，直接复用，然后移动K节点，即可完成一次更新；若新的比老的长，创建，可以看到下图新的比老的多，新的多了一个D，多出来的这个节点就需要创建并添加到尾部。老的比新的长，删除，可以看到下图老的比新的多了个C，多出来的这个节点需要删除。
vue2.X 和vue33.X 渲染器的diff算法区别
weixin_49232311的博客
07-06 1013
vue3 diff算法
Vue2和Vue3中的diff算法
最新发布
weixin_45231569的博客
08-18 1130
Vue2和Vue3中的diff算法
Vue2和Vue3的区别
m0_51328823的博客
02-21 4262
1. 双向数据绑定原理 vue2 是结合发布者订阅者模式，结合es6Object.defineProperty()对数据进行劫持，进一步通过vue中的watcher的update实现双向数据绑定。 vue3 中使用了es6的proxy进行数据代理。 相对于vue2，使用proxy的优势： defineProperty只能监听某个属性，不能对全对象监听； 可以监听到数组内部的变化； vue2中我们给对象添加一个新属性，它不会更新到视图上，只是因为新添加的属性并没有通过Object.defineProper
vue2 vue3 diff算法比较
博客
03-19 1387
简单来说，就是先老节点与新节点，头对头->尾对尾->头对尾->尾对头,再不行就从根据新节点key值，找对应的老节点，找到更新对应的真实dom.以上五步是不符合条件依次往下，符合条件，新老节点的startIndex或endIndex会向中间靠拢，进行下一节点的对比。例如：现在有abcd四个节点，需要在bc节点间添加一个e节点，没有key值时，会将c节点变成e节点，d节点变成c节点，最后加入d节点（如下图一）。3：vue2的diff完全乱序的列表需要借助key，性能会好一些，vue3是借助位置变化值。
Vue2.x-虚拟DOM和diff算法（笔记）
wanghuan1020的博客
01-12 4708
虚拟DOM和diff算法虚拟DOM和diff算法简述snabbdom简介安装测试环境搭建虚拟 DOM 和 h 函数虚拟 DOMh 函数基本使用嵌套使用手写 h 函数diff 算法例子diff 处理新旧节点不是同一个节点时diff 处理新旧节点是同一个节点时手写新旧节点text的不同情况尝试书写 diff 更新子节点diff 算法的子节点更新策略手写子节点更新策略 虚拟DOM和diff算法 简述 diff 算法 以装修房子为例，如果我们仅需要在客厅新添一座沙发或者将卧室的床换个位置。那么将整个房子重新
vue 系列 -- vue 3.x 与 vue2.x 的区别
小陈的博客
10-28 343
自定义元素白名单现在已经在编译时执行。对特殊的is prop的使用只严格限制在被保留的标记中。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue2.x-source-code:vue2.x源码分析和测试-vue source code
03-24
Vue.js 是一款非常流行的前端JavaScript框架，特别是在2.x版本中，其设计思想和实现机制深受开发者喜爱。Vue 2.x的源码分析和测试对于深入理解框架的工作原理、提升开发技能以及优化应用性能至关重要。本项目名为...
Vue3.x入门
weixin_52283244的博客
07-23 1286
目录 简介 优化: 破坏性语法更新 组合式API setup入口函数 响应式API - reactive *响应式API - ref 响应式API - computed (计算属性) 响应式API - watch 生命周期函数 Vue3.x中的生命周期钩子函数 拓展 父子通信 provide 和 inject 1. 基础使用 2. 传递响应式数据 TemplateRef 简介 1. vue3.0 社区生态已经逐步完善 2. 相较于vu...
vue2和vue3diff算法对比
weixin_42254016的博客
05-13 327
4、然而，拿新的一组子节点中的头部节点去旧的一组子节点中寻找可复用的节点，并非总能找到，这说明这个新的头部节点是新增节点，只需要将其挂载到头部即可。2、如果经过四个端点的比较，都没有可复用的节点，则将旧的子序列保存为节点 key 为 key ，index 为 value 的 map。3、拿新的一组子节点的头部节点去 map 中查找，如果找到可复用的节点，则将相应的节点进行更新，并将其移动到头部，然后头部指针右移。5、继续双端对比，经过上述处理，最后还剩下新的节点就批量新增，剩下旧的节点就批量删除。
【前端必备】深入详解Vue2/Vue3 diff算法实现思路
天天打码-16年老码农
02-04 2067
在做diff算法之前有个基本逻辑要明白，Vue的diff算法是同层比较，不会跨层比较，时间复杂度为O(N)。主要使用首尾比较法（头-头，头-尾，尾-头，尾-尾）。Vue2与Vue3的diff算法主要区别是处理完首尾节点后，对剩余节点的处理方式。
Vue2和Vue3的diff算法
qq_20470063的博客
09-16 510
vue2的diff算法是基于虚拟dom的，主要是比较了虚拟dom树和实际dom树之间的差异，来提高性能。
vue2和vue3中的diff算法
茂茂的博客
03-28 1507
vue2和vue3中的diff算法介绍以及区别
Vue2 diff 算法 和 Vue3 diff算法 区别
技术前端，忠于热爱 @0.活在风浪里
12-06 7110
虚拟dom 是根据模板生成一个js对象（使用createElement方法）， 根据这个js对象再去生成真实的dom，对复杂的文档DOM结构，提供一种方便的工具， 进行最小化的DOM操作 diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ， 新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法， 但是因为这种机制也给代码运行带来了一些压力 效率低 消耗内存。一些不变的数据， 例如常量，不会去修改它是不需要对比的，vue3是将变量赋值flag1，不变
Vue diff算法
Grand.的博客
02-28 1565
Vue diff算法
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
沐华的博客
10-13 1031
因为 Diff 算法，计算的就是虚拟 DOM 的差异，所以先铺垫一点点虚拟 DOM，了解一下其结构，再来一层层揭开 Diff 算法的面纱，深入浅出，助你彻底弄懂 Diff 算法原理 认识虚拟 DOM 虚拟 DOM 简单说就是 用JS对象来模拟 DOM 结构 那它是怎么用 JS 对象模拟 DOM 结构的呢？看个例子 <template> <div id="app" class="container"> <h1>沐华</h1> &l
vue3和vue2的diff算法有什么不同
09-10
Vue 3.x版本引入了新的响应式系统，其diff算法与Vue 2.x版本有一些不同之处。 首先，Vue 3的diff算法使用了静态模板。在Vue 2中，每个模板在每次渲染时都会被重新解析为一个AST(Abstract Syntax Tree)。然而，在Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值