了解Vue3中diff算法的乱序情况核心算法——最长递增子序列

最长递增子序列

在Vue3中 对于diff算法对比于在Vue2中有了不少的改变。

在其中就有着这一期的内容:最长递增子序列

在认真的看这文章之前 推荐优先了解diff算法以及最长递增子序列在diff算法中的作用

讲解

首先我们得了解他------ 最长递增子序列是一个什么样子的东西?

答:最长递增子序列是经典的动态规划算法。

在百度中的解释是

最长递增子序列(longest increasing subsequence)问题是指,在一个给定的数值序列中,找到一个子序列,使得这个子序列元素的数值依次递增,并且这个子序列的长度尽可能地大。

结合diff算法,比较朴实无华的讲就是------通过计算来减少旧数组需要移动的步数。

你可能会问?什么?怎么就是旧数组了?

没错,这就是下面的这个例子了~

该例子中排除了删除以及新增节点的情况 原因是diff算法乱序排列中的5.1以及5.2有对此的针对性优化 下列的举例指的是5.2中节点出现交叉的情况 进行最长递增子序列计算

当move为true时候 进行最长递增子序列处理 如下

就是所说的getSequence方法

旧数组 A B C D E
新数组 A C D B E

在前置了解的diff算法中可以了解到 会排除相同的一部分 也就是去除相同前置和后置元素

实际上参与对比的也就是只有

旧数组 B C D
新数组 C D B

接下来就是看他的getSequence是如何处理的了

你可能看到这个的时候 头都大了 不必害怕 在这里的处理简单概述就是 主要是 通过贪心加上二分查找去处理最长递增子序列

如果你有种感觉 知识从脑海中流过一点不剩的感觉 那就让我来简单的说一下 最长递增子序列算法吧

如下图表

数据 10 5 7 2 8 11
1 1 1 1 1 1

每一个数字的对应的值 起始都是一

对比的方式是 从左到右

10 起始是1

5 去与10对比 他比不过10 所以他是1

7 去与5以及之前的对比 他比得过5 继续比较 他比不过10 取个他比得过的中的最大值+1 也就是5的值+1 所以就是2

2 去与7以及之前的对比 他比不过前面的 所以他是1

8 去与2以及之前的对比 他比得过2,7,5 继续比较 他比不过10 取个他比得过的中的最大值+1 也就是7的值+1 所以就是3

11 去与8以及之前的对比 他比得过2,7,5,8 继续比较 他比不过10 取个他比得过的中的最大值+1 也就是8的值+1 所以就是4

数据 10 5 7 2 8 11
1 1 2 1 3 4

这也就是 在diff算法中最长递增子序列的计算核心

这种插在diff算法中的算法 感觉抽出来讲的话 会脱离本质 毕竟如果单讲最长递增子序列的话 解决方式有很多 但结合diff算法的话 又有着需要前置的逻辑了解 感觉又是点难以讲全 打算再开一个diff算法的了解文章看看 两者结合说不准会友好很多

给个赞吧呜呜呜秋梨膏 敲了好久的:smlie

相关推荐
墨渊君11 分钟前
React Native 跨平台组件库实践: GlueStack UI 上手指南
前端
能工智人小辰14 分钟前
Codeforces Round 509 (Div. 2) C. Coffee Break
c语言·c++·算法
kingmax5421200815 分钟前
CCF GESP202503 Grade4-B4263 [GESP202503 四级] 荒地开垦
数据结构·算法
晓得迷路了19 分钟前
栗子前端技术周刊第 84 期 - Vite v7.0 beta、Vitest 3.2、Astro 5.9...
前端·javascript·vite
岁忧20 分钟前
LeetCode 高频 SQL 50 题(基础版)之 【高级字符串函数 / 正则表达式 / 子句】· 上
sql·算法·leetcode
独立开阀者_FwtCoder22 分钟前
最全301/302重定向指南:从SEO到实战,一篇就够了
前端·javascript·vue.js
Moment31 分钟前
给大家推荐一个超好用的 Marsview 低代码平台 🤩🤩🤩
前端·javascript·github
小满zs35 分钟前
Zustand 第三章(状态简化)
前端·react.js
普宁彭于晏37 分钟前
元素水平垂直居中的方法
前端·css·笔记·css3
恋猫de小郭1 小时前
为什么跨平台框架可以适配鸿蒙,它们的技术原理是什么?
android·前端·flutter