此篇仅给学习过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、如果旧节点先循环完毕,说明新节点有要插入的节点