snabbdom 中 diff 算法执行过程

snabbdom 中 diff 算法执行过程

1. 开始节点和结束节点比较的时候有四种情况

   • oldStartVnode / newStartVnode (旧开始节点 / 新开始节点)
   • oldEndVnode / newSEndVnode (旧结束节点 / 新结束节点)
   • oldStartVnode / newSEndVnode (旧开始节点 / 新结束节点)
   • oldEndVnode / newStartVnode (旧结束节点 / 新开始节点)
     

   如果新开始节点和旧开始节点是 sameVnode（key 和 sel 相同）
   · 调用 patchVnode() 对比和更新节点
   · 把新旧开始索引向后移动 newStartId++ / oldStartId++
   如果新结束节点和旧结束节点是 sameVnode（key 和 sel 相同）
   · 调用 patchVnode() 对比和更新节点
   · 把新旧开始索引向后移动 newEndId-- / oldEndId--
   如果旧开始节点和新结束节点是 sameVnode（key 和 sel 相同）
   · 调用 patchVnode() 对比和更新节点
   · 把 oldStartId 对应的 DOM 元素移到 oldEndtId 对应的 DOM 元素右边，更新索引 oldStartId++ / newEndId--
   如果旧结束节点和新开始节点是 sameVnode（key 和 sel 相同）
   · 调用 patchVnode() 对比和更新节点
   · 把 oldEndId 对应的 DOM 元素移到 oldStartId 对应的 DOM 元素左边，更新索引 oldEndId-- / newStartId++
   如果以上情况都不满足，遍历旧节点，查找旧节点数组中是否有和 newStartId 对应 DOM 元素相同（key相同）的节点，若有
   · 调用 patchVnode() 对比和更新节点
   · 把该元素移到 oldStartId 对应的 DOM 元素的左边，更新索引 newStartId++
   如果旧节点数组中没有和 newStartId 对应 DOM 元素相同（key相同）的节点，则
   · 创建新的 DOM 插入到 oldStartId 对应的 DOM 元素的左边，更新索引 newStartId++
   新旧节点数组有其中一个循环结束时，若旧节点数组没有遍历完，则剩余的节点直接删除，若新节点没有遍历完，则依次创建对应的 DOM 元素插入到 oldStartId 对应的 DOM 元素和 oldEndId 对应的 DOM 元素之间