如何理解diff算法

原创已于 2023-07-26 15:00:08 修改 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-07-26 09:41:19 首次发布

Diff算法用于比较虚拟节点，生成patch对象来局部更新DOM。它遵循深度优先、同层比较原则，不会跨层级。在Vue中，当数据改变时，会触发一系列过程，包括setter、Dep.notify以及patch方法，用于更新新旧VNode。对于不同类型的节点，采取直接替换；对于同类节点，会根据子节点情况进行文本替换、添加、删除或更新子节点操作。

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单的说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

特点

1. 比较只会在同层级进行，不会跨层级比较

2. 在diff比较的构成中，循环从两边向中间比较

应用场景

diff算法在很多场景下都有应用，在vue中，用作于虚拟DOM渲染成真是DOM的新旧VNode节点比较

比较方式

diff整体策略为：深度优先，同层比较

1. 比较只会在同层级进行，不会跨层级比较

2. 比较的过程中，循环从两边向中间收拢

原理分析

数据改变 ----触发--> setter---触发--->Dep.notify ---通知订阅者---> patch(oldvnode, newvnode)

之后判断新旧两个节点是否为同类标签，如果不是同类标签就直接替换；如果是同类标签的话，进一步执行patchVnode()方法，在这个方法内部，也是需要先判断一下新旧虚拟节点是否相同，如果相等，就直接return；如果不相等就需要分情况来比对，比对的原则就是以新虚拟节点的结果为准，分为以下几种情况：

oldvnode和newvnode都有文本节点---执行--->用新的文本节点替换旧文本节点
oldvnode没有子节点，newvnode有子节点---执行--->添加新的子节点
oldvnode有子节点，newvnode没有子节点---执行--->删除旧的子节点
oldvnode和newvnode都有子节点---执行--->updateChildren()方法