vue3源码中的最长递增子序列的实现方式

---

前言

vue3的源码中关于diff算法中用到了最长递增子序列，所以本篇文章就学习一下是vue3中是如何实现的。

---

一、最长递增子序列是什么？

子序列 是由数组派生而来的序列，最长递增，顾名思义，就是在数组中找到符合这个描述的子序列，例如[1,2,0,8,3,4,]，这个数组的最长递增子序列就是[1,2,3,4]。

二、寻求最长递增子序列

如何寻求最长递增子序列呢？可以从易到难，先掌握思路，这里是leetcode原题的链接。

leetcode原题描述：
给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。

示例 1：

输入：nums = [10,9,2,5,3,7,101,18]
输出：4
解释：最长递增子序列是 [2,3,7,101]，因此长度为 4 。

示例 2：

输入：nums = [0,1,0,3,2,3]
输出：4

示例 3：

输入：nums = [7,7,7,7,7,7,7]
输出：1

解题思路：
因为题目中只要求返回最后的长度，因此结合贪心算法就可以实现。（虽然得出的最终结果很可能和最长递增子序列的实际结果有出入，但长度是一样的）。
首先，创建一个数组用于收集最长递增子序列，然后开始遍历原数组，当最长递增子序列长度为0时，直接将遍历的数字放入即可，之后，当遍历的数字大于记录的最长递增子序列最后一项末尾数字时，新增记录到最长递增子序列末尾。否则，找到最长递增子序列中，第一个大于该当前遍历到的数字，将其替换为当前遍历到的数字（对于同一个地方，始终倾向于存放更小的值，以寻求最长递增子序列的局部最优解）。

/**
 * @param {number[]} nums
 * @return {number}
 */
var lengthOfLIS = function (nums) {
    if (nums.length === 0) return 0;
    const tails = [nums[0]];
    for (let i = 1; i < nums.length; i++) {
        /* 当遍历的数字大于记录最后一项末尾数字时，新增记录否则，
                找到记录中，第一个末尾大于该数字的记录，更改其末尾 */
        const current = nums[i];
        const end = tails[tails.length - 1];
        if (current > end) {
            tails.push(current);
        } else {
            const index = getFirstGreaterIndex(current, tails);
            tails[index] = current;
        }
    }
    return tails.length;
    /**
     * 找到数组中第一个大于传入值的数字，返回在数组这个数字的下标
     * @param target  传入值
     * @param arr  数组
     */
    function getFirstGreaterIndex(target, arr) {
        for (let t = 0; t < arr.length; t++) {
            if (arr[t] >= target) {
                return t;
            }
        }
    }
};

三、在vue3的源码中是如何寻求最长递增子序列

正如我们之前提到的，这种通过贪心算法的做法确实能得到的最长递增子序列的长度，但细心的小伙伴也一定发现了，这种做法所得到的最长递增子序列实际上是可能会和真正的结果存在出入的，即：贪心算法中，对于同一个地方，始终倾向于存放更小的值，以寻求最长递增子序列的局部最优解，但可能会因此导致全局最优解有所偏差。比如这个数组[2,14,17,5,7,8,1]，如果通过上述做法，最后得到的tails实际上是[1,5,7,8]，而非实际中应该的[2,5,7,8]。为此，vue3中的做法就是将通过贪心算法得出最长递增子序列再进行一次回溯修正。废话不多说，直接上代码。

function getSequence(arr: number[]): number[]{
    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]; // 获取最后一位的索引
            if (arr[j] < arrI) {  // 判断结果序列中的最后一位是否小于当前值，如果是，则记录反向链表
                p[i] = j;  // 在反向链表当前位置记录结果序列中的这个位置的指针（也就是当前值对于的前置值的指针）
                result.push(i); // 同时把i记录到结果序列的末尾
                continue;
            }
            // 这里开始是二分查找的逻辑，找到第一个比当前值大的值
            u = 0;
            v = result.length - 1;
            while (u < v) {
                c = (u + v) >> 1;
                if (arr[result[c]] < arrI) {
                    u = c + 1;
                } else {
                    v = c;
                }
            }
            if (arrI < arr[result[u]]) {
                if (u > 0) {
                    p[i] = result[u - 1]; // 同时，记录反向链表
                }
                result[u] = i; // 用当前索引i替换原来的索引
            }
        }
    }
    // 这里开始就是回溯修正
    u = result.length;
    v = result[u - 1];
    while (u-- > 0) {  // 从后往前回溯
        result[u] = v;
        v = p[v];
    }
    return result;
}

这就是vue3中关于算出最长递增子序列的源码，vue官方的做法是：首先，创建一个反向链表用于后续回溯修正，之后的做法和前面的解题思路大致相同，都是创建一个数组作为最终的最长递增子序列结果，然后遍历原数组，并根据情况把原数组中当前遍历的值插入result数组末尾或是对其中第一个大于该值的值进行替换（这里vue官方采用了二分查找的方式提高了查找效率），只不过这里因为最后需要进行回溯修正，因此选择的是存储遍历到的数在原数组中对应的索引而非这个值，同时，还需要在直接创建的反向链表中记录当前插入result数组中的值的前置指针（如下图一，当在递增序列中记录30这个值的时候，还需要在反向链表中记录30的前置指针，也就是10这个值的指针0，之后情况以此类推）。当原数组遍历完成过后再通过之前记录的反向链表进行一次回溯修正（如下图二，从递增子序列最后一位开始回溯，也就是索引4，索引4对应的值300在反向链表中记录的前置指针是3，就把索引4前面的索引6替换为反向链表中的索引3，索引3再继续回溯，依次类推，直到整个子序列全部回溯一遍结束），最后result中记录的就是原数组中最长子序列对应值的索引数组，返回result用于后续diff计算。

图一：回溯修正前

图二：回溯修正后

---

总结

vue3中求出最长递增子序列的方法可以分为以下四步
1.动态规划（dp）
将复杂的问题分解为相同的子问题，求解子问题后将其存起来，根据子问题之间的关系逐步求解
2.二分查找
在一组有序数组中，折半查找，提高查找效率。
3.贪心算法
也叫贪婪算法，在每一步做选择的时候，始终选择局部最优解。
4.回溯修正
构造一反向链表，每个节点记录上一个节点位置，最后回溯修正。