react diff算法实现我们了解了,我们继续对比学习以下vue的算法流程是怎样的
VUE算法时间复杂度
同样是将时间复杂度降低到了O(n)
Vue对diff算法的改进
1、和react的策略如出一辙,同样的三条策略
2、唯一不同点在于element diff的纬度上vue有了自己的想法
Vue对element diff做的优化
在vue内部遍历新旧树同一层级节点时,对于旧树和新树分别有一个头尾指针(共四个指针,分别是oldStart,oldEnd,newStart,newEnd),利用这四个指针按一定规则进行比较,规则如下:
1、先比较头头/尾尾节点
2、再比较头尾/尾头节点
3、处理新增节点
4、处理更新节点
也就是上图所示,看着比较清楚,以上所有情况处理完成后,最后只剩下被删除掉的节点&