vue的diff算法
2023-04-23 本文已影响0人
sun_hl
当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断，相同则调用patchVnode方法。
patchVnode做了以下操作：
找到对应的真实dom，称为el
1、如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
2、如果oldVnode有子节点而VNode没有，则删除el子节点
3、如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
4、如果两者都有子节点，则执行updateChildren函数比较子节点
updateChildren主要做了以下操作：
1、设置新旧VNode的头尾指针
2、新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、3、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作
