个人理解 对 vdom diff算法

110 阅读1分钟
  • DOM 操作是很耗性能,vue 是数据驱动视图,为了有效的控制 dom 操作,我们提出了 vdom 解决方案
  • vdom 核心价值:最大程度上减少 dom 渲染的范围,通过 用 js 模拟 dom 结构,进行计算,进行对比,找出最小的更新范围,让它去更新。这个对比的过程就是 diff 算法
  • diff 算法是 vdom 的核心,树的 diff 时间复杂度是 O(n^3),导致算法不可用,为了将时间复杂度优化到 O(n),在对比新旧 vnode 时,我们有三个原则:第一、只比较同一层级,不跨级比较;第二,当tag不相同,则直接删除重建,不再深度比较;第三、当 tag 和 key 都相同,说明两者是相同节点,不再深度比较。
  • patch(也称为patching算法):虚拟DOM最核心的部分,它可以将vnode渲染成真实的DOM,这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新