• 事件缓存：将事件缓存，可以理解为变成静态的了
• 添加静态标记：Vue2 是全量 Diff，Vue3 是静态标记 + 非全量 Diff
• 静态提升：创建静态节点时保存，后续直接复用
• 使用最长递增子序列优化了对比流程

比对子节点

在 Vue2 里 updateChildren 会进行

• 头和头比
• 尾和尾比
• 头和尾比
• 尾和头比
• 都没有命中的对比

在 Vue3 里 patchKeyedChildren 为

• 头和头比
• 尾和尾比
• 基于最长递增子序列进行移动/添加/删除

比如

• 老的 children：[ a, b, c, d, e, f, g ]

• 新的 children：[ a, b, f, c, d, e, h, g ]

• 先进行头和头比，发现不同就结束循环，得到 [ a, b ]

• 再进行尾和尾比，发现不同就结束循环，得到 [ g ]

• 再保存没有比较过的节点 [ f, c, d, e, h ]，并通过 newIndexToOldIndexMap 拿到在数组里对应的下标，生成数组 [ 5, 2, 3, 4, -1 ]，-1 是老数组里没有的就说明是新增

• 然后再拿取出数组里的最长递增子序列，也就是 [ 2, 3, 4 ] 对应的节点 [ c, d, e ]

• 然后只需要把其他剩余的节点，基于 [ c, d, e ] 的位置进行移动/新增/删除就可以了

使用最长递增子序列可以最大程度的减少 DOM 的移动，达到最少的 DOM 操作