diff算法用于在虚拟DOM树中找出节点差异，当数据改变触发setter时，生成oldVnode和newVnode进行比较。如果节点不同标签则替换，相同标签则进一步判断内容。对于文本节点，直接替换；有子节点的情况，通过updateChildren方法进行子节点比对，从两端开始并尝试匹配，key值相同则复用节点。举例说明了比对过程和节点的移动与插入。
diff算法：为了找出虚拟DOM树节点之间的差异，最小化的更新视图。
diff算法的触发条件就是数据改变时会触发setter方法，通知订阅者并生成oldVnode和newVnode，使用patch方法比较oldVnode和newVnode是否是同类标签，不是同来标签就是直接替换，是同类标签就再判断是否相等，相等就直接返回return，不相等再分情况判断。
- oldVnode和newVnode都是文本节点，直接用新文本替换
- oldVnode没有子节点，newVnode有子节点，增加新的子节点
- oldVnode有子节点，newVnode没有子节点，删除旧的子节点
- oldVnode和newVnode都有子节点，这时候就需要进行子节点的比对updateChildren
updateChildren：是通过同级比对且从两边开始比对的方式
- 从两边开始依次比较节点，当比较成功后退出比较
- 渲染结果以newVnode的为准
- 每次比较成功后，start和end节点都向中间靠拢一位
- 当新旧节点有一个start节点跑到end节点右侧是终止比较
- 若都匹配不到，则旧虚拟Dom的key值去比对新虚拟Dom的key值，若key值相同，则复用，并移动到新的虚拟Dom的位置
举个例子
oldVnode： a，b，c
newVnode：d，b，c，a
那么oldVnode的start节点就是a，end节点就是c，newVnode的start节点就是d，end节点就是a
- 首先oldVnode的start节点a与newVnode的start节点d比较，不匹配
- a再与newVnode的end节点a比较，匹配，直接复用a，判断位置不对，再把a节点放到对应的位置
- a比对完了，oldVnode的start节点向内移一位变成b，newVnode节点向内移一位变成c，重新开始比对
- b比对d不匹配 b比对c不匹配，start节点都不匹配
- 这时候开始oldVnode的end节点c匹配，c比对d不匹配，c比对c匹配，直接复用，再判断位置是否准确，准确就不做处理
- oldVnode的end节点内移一位变成b，newVnode的end节点内移一位变成b
- 再从oldVnode的end节点b开始匹配，b对d不匹配，b对b匹配，直接复用，再处理位置
- 然后oldVnode的end节点越过了start节点，匹配结束
- newVnode还剩d节点未匹配，直接生成d节点并插入到对应位置，完成视图更新
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
