戳蓝字"
前端优选
"
关注我们哦
!
move方法
vue3.0源码中在移动节点时,判断生成最长增长子序列,以节省DOM操作
// generate longest stable subsequence only when nodes have moved
// 仅当节点移动时生成最长稳定子序列
const increasingNewIndexSequence = moved
? getSequence(newIndexToOldIndexMap)
: EMPTY_ARR
跟Vue2的DOM-Diff相比有哪些不同之处呢,为什么要这么做呢?
Vue3.0方法源码
该方法返回的是数组中子序列的索引值
function getSequence(arr) {
const p = arr.slice() // 保存原始数据
const result = [0] // 存储最长增长子序列的索引数组
let i, j, u, v, c
const len = arr.length
for (i = 0; i < len; i++) {
const arrI = arr[i]
if (arrI !== 0) {
j = result[result.length - 1] // j是子序列索引最后一项
if (arr[j] < arrI) { // 如果arr[i] > arr[j], 当前值比最后一项还大,可以直接push到索引数组(result)中去
p[i] = j // p记录第i个位置的索引变为j
result.push(i)
continue
}
u = 0 // 数组的第一项
v = result.length - 1 // 数组的最后一项
while (u < v) { // 如果arrI <= arr[j] 通过二分查找,将i插入到result对应位置;u和v相等时循环停止
c = ((u + v) / 2) | 0 // 二分查找
if (arr[result[c]] < arrI) {
u = c + 1 // 移动u
} else {
v = c // 中间的位置大于等于i,v=c
}
}
if (arrI < arr[result[u]]) {
if (u > 0) {
p[i] = result[u - 1] // 记录修改的索引
}
result[u] = i // 更新索引数组(result)
}
}
}
u = result.length
v = result[u - 1]
//把u值赋给result
while (u-- > 0) { // 最后通过p数组对result数组进行进行修订,取得正确的索引
result[u] = v
v = p[v];
}
return result
}
以数组[2, 11, 6, 8, 1]为例:最终输出的结果为[0, 2, 3],表示最强增长序列的索引分别是0, 2 ,3;对应的值是2,6,8。换句话说,在这个数组中最长连续增长的值就是数组中的2,6,8三个元素。
大家可以从力扣上面找到该算法的相关题解,解释相对详尽一些,贪婪法+二分查找、动态规划等多种解题思路。
实际目的
费了这么大的力气,使用这个方法的目的是什么呢?
Vue2在DOM-Diff过程中,优先处理特殊场景的情况,即头头比对,头尾比对,尾头比对等。
而Vue3在DOM-Diff过程中,根据 newIndexToOldIndexMap 新老节点索引列表找到最长稳定序列,通过最长增长子序列的算法比对,找出新旧节点中不需要移动的节点,原地复用,仅对需要移动或已经patch的节点进行操作,最大限度地提升替换效率,相比于Vue2版本是质的提升!
结语
本文简略地介绍了最强增长序列的计算方式,如有疏漏之处还请多多提点,欢迎关注公众号【前端优选】
添加个人微信,进群与小伙伴一起玩耍(即将推出)~