Vue3中的diff算法——乱序处理

大家好,我是哈默。今天我们来继续来学习一下 vue3 中的 diff算法。上回,我们说到了 diff 的前 4 步。那么最后,我们还需要看一下 乱序 的情况 vue 是如何处理的。

举例

因为乱序的代码是比较多的,所以我们主要来说一下它的核心逻辑。

对于我们当前的例子而言,首先,我们经过第一步(自前向后比对)、第二步(子后向前比对)之后,结果如下:

对于第三步(挂载多的新节点)、第四步(卸载多的旧节点)而言,我们的新、旧节点数量是相同的,所以不需要做任何处理。

这样,我们就来到了第五步 ------ 乱序。

乱序处理

对于乱序而言,它主要处理三种情况:

  1. 删除旧节点 f
  2. 挂载新节点 g
  3. 对于节点 b-d 进行移动

删除旧节点

删除的逻辑是:如果旧节点的 key 在新节点列表中找不到了,那么我们就认为这个旧节点应该被删除,比如我们这里的节点 old-f,它的 key 是 6,在新节点列表中找不到 key 为 6 的元素,所以我们就将它删除。

但是,如果对于每个旧节点,我们都通过这个旧节点的 key 去新节点列表中查找,有时候是不必要的。

所以,vue 在这里做了一个优化,它在记录 2 个变量:已经修复的新节点数量 patched 和 新节点待修复的数量 toBePatched

在每次修复完一个新节点后,都会 patched++,然后在执行我们上面的查找行为之前,会判断一下:patched >= toBePatched?,如果是 true,就代表着当前所有的新节点都已经处理完了,那么对于剩下的旧节点,我们不用再去查找,直接删除即可。

挂载新节点

挂载的逻辑就比较简单了:如果拿新节点的 key,没有找到对应的旧节点,比如我们这里的节点 new-g,它的 key 是 7,在旧节点列表中找不到 key 为 7 的元素,所以我们就将它挂载。

移动节点

现在,我们有 3 个节点需要移动:b、c、d。

那么,如何移动才能最高效呢?

我们通过肉眼可以知道:我们只需要将 b 移动到末尾就可以了!

但是,vue 该如何知道呢?

这里,我们就需要介绍一个 最长递增子序列 的概念。

最长递增子序列

假如我们有:

旧数组:[1, 2, 3, 4, 5, 6]

新数组:[1, 3, 2, 4, 6, 5]

对于新数组而言,我们如果想找到 递增子序列 的话,可以找到很多:

  1. 1, 3, 6
  2. 1, 2, 4, 5

...

确认这个递增子序列的目的,就是为了在由旧数组变成新数组的时候,递增子序列里的这些元素可以不用移动。

比如,对于 1, 3, 6 而言,我们可以不需要移动它们,只需要移动剩下的 2, 4, 5 到对应的位置即可,总共需要 3 次移动。

对于 1, 2, 4, 5 而言,我们可以不需要移动它们,只需要移动剩下的 3, 6 到对应的位置即可,总共需要 2 次移动。

显而易见的是,当我们的递增子序列越长,我们所需要的移动次数就越少。

所以,我们求解最长递增子序列的目的就是:减少移动次数,进行更高效地移动。

对于我们目前的例子

对于我们现在而言,我们的数组里的元素是:新节点在旧节点列表里的索引。

比如,我们的 new-c,它在旧节点中的索引是 2,同理,new-d 是 3,new-b 是 1。

所以,我们可以得到一个数组:[2, 3, 1]

对于这个数组而言,最长递增子序列为:[2, 3],也就是 cd 不需要移动,只需要移动 b 即可。

这样一来,我们就通过 最长递增子序列 完成了最高效的移动操作。

总结

至此,我们完成了乱序的处理。

其中,涉及到了一个新的概念,最长递增子序列,它其实只是用来处理移动的场景,让我们的移动能够高效的进行。

相关推荐
Deepsleep.18 分钟前
前端性能优化面试回答技巧
前端·面试·性能优化
不想上班只想要钱2 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
三思而后行,慎承诺2 小时前
Kotlin 常见问题
开发语言·面试·kotlin
Li_Ning212 小时前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_915373882 小时前
Electron 入门指南
前端·javascript·electron
同志327133 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟3 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境3 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu3 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山3 小时前
在TS中如何在子进程中动态实例化一个类
前端