一、diff算法是什么
diff算法是一种通过同层的树节点进行比较的高效算法
diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图，所以 diff 算法本质上就是比较两个js对象的差异
特点
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()方法
updateChildren
同级比对 --- 减少比对次数，可以最大化的提高比对性能
首尾指针法
①依次比对，当比较成功后退出当前比较
②渲染结构以newVnode为准
③每次比较成功之后start点和end点向中间靠拢
④当新旧节点中有一个start点跑到end点右侧时终止比较
⑤如果都匹配不到，则旧虚拟DOM key只去比对新虚拟DOM的key值，如果key相同则复用，并移动到新虚拟DOM的位置
比对顺序
首先，旧虚拟节点的start和新虚拟节点的start做比对，如果没有比对成功，就用旧虚拟节点的start和新虚拟节点的end做比对
如果依旧没有比对成功，就用旧虚拟节点的end和新虚拟节点的start做比对，如果依旧没有比对成功，旧虚拟节点的end会和新虚拟节点的end做比对
比对原则就是依照以上顺序依次比较
当比对成功，就退出当前比对，渲染结果会以新虚拟节点的结果为准
每次比对成功后，比对成功的start会向右侧移动，end会向左侧移动。在移动的过程中，当start点跑到end点右侧的时候就终止比较
比对实例
文章来源：https://www.toymoban.com/news/detail-782585.html
文章来源地址https://www.toymoban.com/news/detail-782585.html
到了这里，关于【vue】diff 算法详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
