介绍 diff 算法
-
diff 算法应用很广泛，例如 github 的 pull request 中的代码 diff
-
如果要严格 diff 两颗树，时间复杂度 O(n^3)，不可用
diff 算法的优化
-
只比较同一层级，不跨级比较
-
tag 不同则删除重建（不再去比较内部细节）
-
tag 和 key 两者都相同，则认为是相同节点，不在深度比较
（key 的重要性）
- 时间复杂度降低到 O(n)
vue2、vue3、react 三者 diff 算法的区别
react diff 算法是（仅右移）
指针仅往右边移动，
vue2 diff 算法是（双端比较）
定义 oldStartIndex、oldEndIndex、newStartIndex、newEndIndex 四个指针相互比较
vue3 diff 算法是（最长递增子序列）
最长递增子序列概念
最长递增子序列：在一个给定的数值序列中，找到一个子序列，使得这个子序列元素的数值依次递增，并且这个子序列的长度尽可能地大。最长递增子序列中的元素在原序列中不一定是连续的。
比如：
序列 [10, 9, 2, 5, 3, 7, 101, 18] 的最长递增子序列是 [2, 3, 7, 101] 或 [2, 3, 7, 18]。
序列 [3, 2, 8, 9, 5, 6, 7, 11, 15, 4] 的最长递增子序列是 [2, 5, 6, 7, 11, 15]
vue react 为何循环时必须使用 key?
-
vdom diff 算法会根据 key 判断元素是否要删除
-
匹配了 key，则只移动元素 —— 性能较好
-
未匹配 key，则删除重建 —— 性能较差
