diff算法详解

什么是diff算法？

diff算法是一种通过同层的树节点进行比较的高效算法，它的目的就是找出新旧不同虚拟DOM之间的差异，使得能够最小化地更新视图，所以diff算法本质上就是比较两个js对象的差异。

特点

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

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

应用场景

比如在vue中，用作于虚拟DOM渲染成真实DOM时的新旧虚拟节点比较

 diff算法比较两个js对象的差异流程

当数据改变，触发内部的setter方法，进一步触发Dep.notify方法，然后通知订阅者即通知到各数据使用方，执行patch方法，patch方法接收两个参数即新旧虚拟节点，在这个方法内部会判断一下是不是同类标签，如果不是同类标签，那就没有比对的必要，直接替换就可以了，如果是同类标签的话，那就需要进一步执行patchVnode方法，在这个方法内部也是首先需要判断下新旧虚拟节点是否相等，如果相等的话那就没有比对的必要了，直接return。 如果不相等的话，那就需要分情况来比对，比对的原则就是以新虚拟节点的结果为准，分为以下几种情况：

① 第一种情况是旧虚拟节点和新虚拟节点都有文本节点，这种情况就直接用新的文本替换旧文本就可以了；

② 第二种情况是旧虚拟节点没有子节点，新的有子节点，那这种情况直接添加新的子节点就可以了；

③ 第三种情况是旧的有子节点，新的没有子节点，这种情况是直接删除旧的子节点就可以了；

④ 第四种情况是，新旧都有子节点，这种情况就需要比对他们的子节点，所以内部封装了一个方法，叫updateChildren方法，专门来比对他们的子节点。

updateChildren方法

在内部规定了只在同级做比对，这样可以减少比对次数，最大化的提高比对性能，而且在同级比对的时候，采用的是首尾指针法，不管新旧虚拟节点，都会有首尾两个元素，对应的是start和end

参考自B站视频：

 6分钟彻底掌握vue的diff算法，前端面试不再怕！_哔哩哔哩_bilibili