本系列主要整理前端面试中需要掌握的知识点。本节介绍diff算法流程以及相关例子。 如果想看源码推荐YK菌的【Vue源码】图解 diff算法 与 虚拟DOM-snabbdom-最小量更新原理解析-手写源码-updateChildren哦~ 如果想一步一步跟着写源码推荐尚硅谷的【尚硅谷】Vue源码解析之虚拟DOM和diff算法哦~
if (oldVnode.key == newVnode.key && oldVnode.sel == newVnode.sel)
if (oldVnode === newVnode)
diff算法包含四种命中查找: ①新前与旧前 ②新后与旧后 ③新后与旧前(此种发生后,涉及到移动节点,新后指向的节点,移动到旧后之后) ④新前与旧后(此种发生后,涉及到移动节点,新前指向的节点,移动到旧前之前) 命中一种就不再进行命中判断了,如果都没有命中,就需要用循环来寻找,移动到旧前之前。 结束查找的条件是:旧前<旧后 或者 新前<新后
如果命中,则将新后所指的节点移动到旧后之后,新后-1,旧前+1;
如果没有命中,则看④新前与旧后能否命中。
(1)如果新节点中还有剩余:就将新节点中剩余的都插入旧后之后或者旧前之前(旧后之后和旧前之前指的是同一个位置)。 (2)如果旧节点中还有剩余:就将旧前和旧后之间的(包括旧前和旧后)的节点删除。