此文章可帮助读者快速了解diff算法的理论知识,参考其他文章结合自己理解

核心思想

Diff算法,至根节点到叶节点,从左到右,从上到下,依次遍历进行对比

应用场景

虚拟dom

再Vue中和React有应用到

将dom变化前和变化后的状态,而产生虚拟dom树,再path里面进行diff算法,最后操作到真实的dom树

有唯一key值

Diff算法对比阶段

新旧节点对比:
1、当节点的类型不同,将旧节点进行销毁,创建新节点
2、若对比后新旧节点位置不同,则将旧节点的位置按照新节点进行移动
3、当节点类型相同,依次对比新旧节点树
(1)、若先遍历完新节点后,但旧节点树剩余的节点没有遍历完的情况,此时将旧节点的剩余子节点销毁
(2)、若先遍历完旧节点后,但新节点树剩余的节点并没有遍历完的情况,此时将创建剩余新子节点

虚拟dom 数据结构

vnode 本身是一种对象结构

vNode: { 
sel: "节点的标签名",
data: "数据",
children: [// 子节点],
text: "用来描述节点的内容",
key: "节点的唯一key值",
elm: "相当于虚拟dom对应的真实dom的映射关系"