vue源码阅读笔记1——虚拟DOM更新

 

源码位置https://vue-js.com/learn-vue/virtualDOM/patch.html#_5-%E6%9B%B4%E6%96%B0%E8%8A%82%E7%82%B9

重点则是其中的递归对比更新方法

 

 

 

 

 

 

 

 

 

 

 

 

 

本质都是插在未处理节点之前 但缺点是对新旧节点进行双层遍历 代价较高

 

 

优化后

 

1、2、3、4步骤进行查找 下面都是新旧节点群内的未处理节点。

找到了 进行更新

没找到，如果还没找到一样的节点 则遵循上面的双重循环进行遍历查找。

其过程如下图所示： 

 对于vue的diff算法 对于一个未处理序列 并不会只从某一个方向开始 而是从序列的开始和结束位置 双向进行处理

对于从前往后处理的方向 index肯定是处理完进行startIndex++处理；

对于从后往前处理的方向 index肯定是更新完节点节点进行endIndex--处理

 

当开始位置startIndex小于结束位置endIndex时，表示所有节点都已经遍历过了

 

对于如果old的start大于end 说明此时new节点中存在新增节点 直接插到DOM中；

对于new的start大于end 说明此时old节点中存在多余节点 直接删除该范围内节点。

 

至此完成了所有节点的更新。