Vue2、Vue3的Diff算法比较

前言

diff算法是vue更新dom前，比较新旧vdom的一种优化方式

特点：

1. 只会在同一级比较
   

2. 从两边往中间收拢
   

差别

• vue2 和 vue3的差别在于处理完头尾节点后，对设于节点的处理方式
• vue2 是遍历旧节点，将旧节点映射到map里，然后再遍历新节点，看是否有可以复用的再打上补丁
• vue3 是建立一个 新节点的剩余节点在旧节点中的位置 的数组，然后通过数组找到一个最长递增子序列，然后这个序列的节点不动，再去移动剩下的节点。

最长递增子序列

function lengthOfLIS(nums) {
  const n = nums.length;
  if (n === 0) return 0;

  const dp = new Array(n).fill(1);

  for (let i = 1; i < n; i++) {
    for (let j = 0; j < i; j++) {
      if (nums[i] > nums[j]) {
        dp[i] = Math.max(dp[i], dp[j] + 1)
      }
    }
  }

  return Math.max(...dp);
}