传统diff算法
对比两棵树的差异,我们取第一棵树的每个节点一次和第二棵树的每个节点比较,这样的时间复杂度为O(n^3)
vue中diff策略
找到同级别的子节点一次比较,然后再找下一级别的节点比较,这样的时间复杂度为O(n)
vue中diff算法执行过程
-
在进行同级别节点比较的时候,首先会对新老节点数组的开始和结尾节点设置标记索引,遍历的过程中移动索引
-
在对开始和结束节点比较的时候,共有四种情况
- oldStartVnode / newStartVnode(旧开始节点 / 新开始节点)
- oldEndVnode / newEndVnode(旧结束节点 / 新结束节点)
- oldStartVnode / oldEndVnode(旧开始节点 / 新结束节点)
- oldEndVnode / newStartVnode (旧结束节点 / 新开始节点)
-
开始节点和结束节点比较，这两种情况类似
- oldStartVnode / newStartVnode (旧开始节点 / 新开始节点)
- oldEndVnode / newEndVnode (旧结束节点 / 新结束节点)
