Vue2、Vue3的Diff算法比较

前言

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

特点:

  1. 只会在同一级比较

  2. 从两边往中间收拢

差别

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

最长递增子序列

js 复制代码
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);
}
相关推荐
纪元A梦1 小时前
贪心算法应用:配送路径优化问题详解
算法·贪心算法
C_player_0012 小时前
——贪心算法——
c++·算法·贪心算法
kyle~3 小时前
排序---插入排序(Insertion Sort)
c语言·数据结构·c++·算法·排序算法
Boop_wu3 小时前
[数据结构] 队列 (Queue)
java·jvm·算法
hn小菜鸡3 小时前
LeetCode 3643.垂直翻转子矩阵
算法·leetcode·矩阵
ゞ 正在缓冲99%…4 小时前
leetcode101.对称二叉树
算法
YuTaoShao5 小时前
【LeetCode 每日一题】3000. 对角线最长的矩形的面积
算法·leetcode·职场和发展
2zcode5 小时前
基于Matlab可见光通信系统中OOK调制的误码率性能建模与分析
算法·matlab·php
纵有疾風起5 小时前
数据结构中的排序秘籍:从基础到进阶的全面解析
c语言·数据结构·算法·排序算法
纪元A梦5 小时前
贪心算法应用:推荐冷启动问题详解
算法·贪心算法