什么是diff算法?

diff算法是一种用于比较虚拟DOM树之间差异的高效算法。就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新DOM。

diff算法的作用?

它是Vue的核心特性之一,允许Vue以一种有效的方式更新DOM以反映数据的最新状态。

Vue的diff算法采用深度优先的递归方式比较两棵虚拟DOM树的差异。它会尽可能地复用老的虚拟节点,只会对差异发生变化的部分进行最小化的DOM更新。

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