Vue2中的双端diff算法缺陷

最新推荐文章于 2024-02-04 09:37:29 发布
最新推荐文章于 2024-02-04 09:37:29 发布
阅读量186 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KalinOvO/article/details/131329231
版权

 对于这样的diff操作，首先对于e节点进行双端比对，结果是匹配不到，新建e节点到头部；然后指针后移到b，继续进行双端比对，比对不到，然后拿着b节点去找，找到有相同的b节点，然后将b节点移动到前面；然后指针继续后移，c节点进行双端比对，同b节点......

但是，对于旧列表 bcd 节点，新列表中也是 bcd 节点，我们其实完全不用去移动 bcd 节点的，我们只需要将a节点移动到后面来就可以了~

所以再vue2中的diff算法，它会去找这个节点，如果可以复用，那么就会产生移动。所以缺点就在于vue2的diff算法它没有去关注哪些节点不用去移动，这样就会产生额外的移动操作。

vue3中就采用了最长递增子序列的思想，尽可能少移动节点，减少无意义的移动！

而且vue2diff算法采用的是递归比对（浪费性能），能否只比较动态的节点，非动态的节点就不比较了，vue3在模板编译的时候会标记，哪些是动态节点，只比较动态节点！

KalinOvO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue的diff算法原理
08-27
在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新节点？ 当数据发生变化...
Vue渲染器（四）：双端diff算法
Zzh1110的博客
12-14 693
这章介绍了双端Diff算法的原理和优势，简单来说主要通过新旧vnode的前后指针来判断，有四种命中情况，命中一种则不再进行判断。
Vue2常见的缺陷与Vue3带来的新特性
NGUP_LEE的博客
11-28 3462
通过上面的图可以知道，Vue2所有的模块都是杂糅在一起的，这样做会导致不好拓展的问题，Vue3是怎么解决的呢？重构-拆包，使用monoerpo管理方式，响应式、编译和运行就全部独立了Vue3中，响应式独立了出来，而Vue2中的响应式只服务于Vue，Vue3中响应式与Vue解耦，你甚至可以在NodeJ S和React中使用响应式。渲染逻辑也被拆分为 平台无关渲染逻辑 和 浏览器渲染API 两部分。
vue2的缺陷
weixin_48357279的博客
05-15 1518
下班回家的途中,一个问题困扰我很久,在vue2中为什么不能给对象直接赋值? 若是使用其他的的api又觉得麻烦,于是就有了这篇博客!!! 一、直接添加属性的问题 我们从一个例子开始 定义一个p标签，通过v-for指令进行遍历 然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行 <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="add
Vue2 中常见Bug以及解决方案
weixin_62643012的博客
03-24 467
Vue2 中常见Bug以及解决方案
Vue 2 和 Vue 3 的 diff 算法：性能优化的进化之路
weixin_48723799的博客
05-07 977
Vue 3 的 diff 算法的优点是可以更好地处理静态节点，通过静态标记和编译时优化，避免了对静态节点的重复比较和 DOM 操作，从而提高了渲染性能。Vue 2 的 diff 算法采用了双端指针的方式，从新旧节点的首尾开始比较，根据 key 值进行匹配，从而找出相同、新增、删除、移动等节点的变化，最后对变化的节点进行 DOM 操作。Vue 3 的 diff 算法采用了静态标记和动态标记的方式，通过静态分析和编译时优化，减少了不必要的节点比较和 DOM 操作，从而提高了渲染性能。
解析Vue 2.5的Diff算法
08-28
Vue 的 Diff 算法主要集中在 `updateChildren` 函数中，该函数负责对比新旧虚拟 DOM 子节点，并决定如何有效地更新真实 DOM。以下是对 `updateChildren` 的关键步骤的解释： 1. **Keyed Diff**：Vue 首先尝试通过键...
vue的diff算法知识点总结
01-19
diff算法首先要明确一个概念就是diff的对象是虚拟dom，更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.children = children this.text = text ...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【前端必备】深入详解Vue2/Vue3 diff算法实现思路
最新发布
天天打码-16年老码农
02-04 1847
在做diff算法之前有个基本逻辑要明白，Vue的diff算法是同层比较，不会跨层比较，时间复杂度为O(N)。主要使用首尾比较法（头-头，头-尾，尾-头，尾-尾）。Vue2与Vue3的diff算法主要区别是处理完首尾节点后，对剩余节点的处理方式。
神秘的diff算法
weixin_49343253的博客
06-26 275
说到diff算法，就得先说虚拟DOM，让我们先来认识一下虚拟DOM 一、啥是虚拟DOM 虚拟DOM指的是根据真实DOM树结构，用javascript对象形式表示的DOM树结构。 真实DOM <div> <p>123</p> </div> var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ] }; 二、为啥会有...
虚拟DOM相关知识
小丕的博客
10-19 177
虚拟DOM相关知识 以下从以下问题引出虚拟DOM相关知识点 1.为什么需要虚拟DOM? 2.虚拟 DOM 的好处？ 3.如何用 JS 对象模拟 DOM 树？ 4.虚拟 DOM 的优缺点？ 5.Vue 中的 key 有什么作用 1.为什么需要虚拟DOM? JS 操作真实 DOM 的代价？ 用我们传统的开发模式，原生 JS 或 JQ 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中，我需要更新 10 个 DOM 节点，浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作
【手写 Vue2.x 源码】第二十八篇 - diff 算法-问题分析与 patch 优化
BraveWangDev
01-17 794
本篇，diff算法问题分析与patch方法改造，主要涉及以下几点：1，初始化与更新流程分析；2，问题分析与优化思路；3，新老虚拟节点比对模拟；4，patch 方法改造；
虚拟DOM和diff算法
CS_lzx的博客
03-23 229
虚拟DOM和diff算法 1.虚拟DOM 1.1核心思想：对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作 1.2根据虚拟DOM树最初渲染成真实DOM 1.3当数据发生变化，页面需要重新渲染的时候，会重新生成一个完整的新的虚拟DOM 1.4拿新的的虚拟DOM与以前的虚拟DOM做对比(diff算法)，得到更新的内容后，更新内容，减少真实DOM的操作，提高性能 1.5不适合再单一，...
【前端知识体系梳理（三）】Diff策略
henu_GM的博客
04-30 2184
​ ✅作者简介：大家好我是无处不楼台,是一个什么都会一点的大前端小白博主！ 📃个人主页：无处不楼台的博客_CSDN博客-JavaScript学习,项目开发,node学习领域博主 🔥系列专栏：知识体系梳理 💖如果觉得博主的文章还不错的话，请👍三连支持一下博主哦🤞 ​
Vue2 Diff算法深入解读
ioth5的博客
02-13 1873
一、前言 Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。 vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效的D...
②Vue3 性能比Vue2好的原因（diff算法优化、静态提升、事件侦听器缓存）
一个努力学习的程序猿
11-03 5593
Vue3diff算法优化静态提升 hoistStatic事件侦听器缓存 cacheHandlers 写下博客主要用来分享知识内容，并便于自我复习和总结。 如有错误之处，请各位大佬指出。 diff算法优化 首先，diff算法是虚拟DOM技术的必然产物，它会对新旧虚拟DOM作对比（即diff），然后将变化的地方更新在真实DOM上。而这其中，如何快速的判别需要变化的内容，就是Vue3.0的提升。具体来看： 在Vue2.0当中，当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节
Vue2 diff 算法 和 Vue3 diff算法 区别
技术前端，忠于热爱 @0.活在风浪里
12-06 7029
虚拟dom 是根据模板生成一个js对象（使用createElement方法）， 根据这个js对象再去生成真实的dom，对复杂的文档DOM结构，提供一种方便的工具， 进行最小化的DOM操作 diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ， 新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法， 但是因为这种机制也给代码运行带来了一些压力 效率低 消耗内存。一些不变的数据， 例如常量，不会去修改它是不需要对比的，vue3是将变量赋值flag1，不变
剑指offer18 -链表问题
蜀沐的博客
10-09 172
题目： https://leetcode-cn.com/problems/shan-chu-lian-biao-de-jie-dian-lcof/ 思路一：函数参数是头之指针和值，遍历链表，如果满足头指针指向节点的下一个节点的值和需要删掉的值相等，那么就需要头指针指向的节点的next域设置为要删掉的下一个节点的值。同时返回头结点的下一个结点的地址。注意：这种情况不包括头节点为空和头节点的值就是要删掉的值 if (!head) return head; if (head->val == val) ret
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值