Vue 3 diff 算法的主要优势是设计了 Block 的概念,在编译阶段对静态模板分析,生成 Block tree,收集动态更新的节点然后在 patch 阶段就可以只比对 Block tree 中的节点,达到提升 diff 性能的目的。而核心 diff 算法,也就是去头尾的最长递增子序列算法和双端比较算法就性能而言差别并不大。

    1. 原节点及其子节点
    2. <ul>
    3. <li key="a">a</li>
    4. <li key="b">b</li>
    5. <li key="c">c</li>
    6. <li key="d">d</li>
    7. </ul>
    8. 新节点及其子节点
    9. <ul>
    10. <li key="a">a</li>
    11. <li key="b">b</li>
    12. <li key="e">e</li>
    13. <li key="c">c</li>
    14. <li key="d">d</li>
    15. </ul>