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);
}
相关推荐
pianmian13 小时前
python数据结构基础(7)
数据结构·算法
好奇龙猫5 小时前
【学习AI-相关路程-mnist手写数字分类-win-硬件:windows-自我学习AI-实验步骤-全连接神经网络(BPnetwork)-操作流程(3) 】
人工智能·算法
sp_fyf_20245 小时前
计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-01
人工智能·深度学习·神经网络·算法·机器学习·语言模型·数据挖掘
香菜大丸6 小时前
链表的归并排序
数据结构·算法·链表
jrrz08286 小时前
LeetCode 热题100(七)【链表】(1)
数据结构·c++·算法·leetcode·链表
oliveira-time6 小时前
golang学习2
算法
南宫生7 小时前
贪心算法习题其四【力扣】【算法学习day.21】
学习·算法·leetcode·链表·贪心算法
懒惰才能让科技进步7 小时前
从零学习大模型(十二)-----基于梯度的重要性剪枝(Gradient-based Pruning)
人工智能·深度学习·学习·算法·chatgpt·transformer·剪枝
Ni-Guvara8 小时前
函数对象笔记
c++·算法
泉崎8 小时前
11.7比赛总结
数据结构·算法