前言
diff算法是vue更新dom前,比较新旧vdom的一种优化方式
特点:
-
只会在同一级比较
-
从两边往中间收拢
差别
- 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);
}