理解diff算法(2.0和3.0)

454 阅读1分钟

vue3.0 diff算法思想

  • 编译模版时进行静态分析标记动态节点,diff对比差异时仅对比动态节点(性能提升明显);
  • diff算法先去头去尾,借此缩短遍历对比数组长度(对数组插入和删除操作性能优化明显);
  • 通过对更新前后子节点数组建立映射表的方式,将O(n^2)复杂度的遍历降低到O(n);
  • 通过最长递增子序列方法了来diff前后的子节点数组,减少移动操作的次数;

vue2.0 diff算法思想

  • Diff同层对比,新旧虚拟DOM对比的时候,Diff算法比较只会在同层级进行, 不会跨层级比较。 所以Diff算法是:广度优先算法。 时间复杂度:O(n)

文章参考来源:juejin.cn/post/699495…