Vue3 Diff算法核心

最新推荐文章于 2025-04-17 10:04:57 发布

前端优选

最新推荐文章于 2025-04-17 10:04:57 发布

阅读量1.1k

点赞数

文章标签：算法列表 js 数据结构索引

本文链接：https://blog.csdn.net/webyouxuan/article/details/108459889

版权

戳蓝字"
前端优选
"
关注我们哦
！

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三个元素。

大家可以从力扣上面找到该算法的相关题解，解释相对详尽一些，贪婪法+二分查找、动态规划等多种解题思路。