vue2-虚拟节点+diff算法

vue2

虚拟DOM

虚拟DOM是表示真实DOM的JS对象,

diff算法

本质: 比较2个JS对象之间的差异
流程图:

updataChildren:

在内部规定只在同级进行对比(最大化的提高比对性能)

首尾比对法

比对流程示例:

循环比对结束的后续处理工作

如果旧数组的首尾指针先相交了，则判断新数组中是否还有没进行比对的节点，有就直接创建。

如果新数组的首尾指针先相交了，则判断旧数组中是否还有没进行比对的节点，有就直接删掉。

总结

总的来说 Vue2 的 diff 算法就是以新的虚拟DOM为准进行与老虚拟DOM的比对，继而进行各种情况的处理。大概可以分为 4 种情况：更新节点、新增节点、删除节点、移动节点位置。比对新老两个虚拟DOM，就是通过循环，每循环到一个新节点，就去老节点列表里面找到和当前新节点相同的旧节点。如果在旧节点列表中找不到，说明当前节点是需要新增的节点，我们就需要进行创建节点并插入视图的操作；如果找到了，就做更新操作；如果找到的旧节点与新节点位置不同，则需要移动节点等。
其中为了快速查找到节点，Vue2 的 diff 算法设置了 4 种优化策略，分别是：
(对比的是新旧虚拟节点,也就是JS对象)
旧节点的开始与新节点的开始
旧节点的结尾与新节点的结尾
旧节点的开始与新节点的结尾
旧节点的结尾与新节点的开始

通过这 4 种快捷的查找方式，我们就不需要循环来查找了，只有当以上 4 种方式都查找不到的时候，再进行循环查找。
最后循环结束后需要对未处理的节点进行处理。