Vue diff算法学习笔记

1,029 阅读1分钟

此篇仅给学习过diff算法的同学做参考,主要记录了Vue中的diff算法的细节点。

详细学习地址:尚硅谷邵山欢(考拉老师)Vue之虚拟DOM和diff算法

1、diff对比一定是虚拟老节点和虚拟新节点的对比,然后算出最小化的更新,最会应用到最新的dom上

2、h函数用来产生虚拟节点

3、循环加key避免不可预知的错误

4、只有是同一个虚拟节点,才进行精细化比较

5、只进行同层比较,不会进行跨层比较

问题1:如何定义为同一个节点”

老节点的key和旧节点的key相同

老节点的选择器和旧节点的选择器相同

diff算法的命中查找(主要对比点)

1、新前与旧前

命中结果:新前与旧前下标同时下移

2、新后与旧后

命中结果:新前与旧前下标同时上移

3、新后与旧前

命中结果:移动新前指向的这个节点到老节点的旧后之后 。

4、新前与旧后

命中结果:移动新前指向的这个节点到老节点的旧前前面。

注意的点:

1、命中一种就不在往下判断了,如果都命中不了,就创建一个map映射,移动到旧节点最开始的时候

2、如果旧节点先循环完毕,说明新节点有要插入的节点