vue中diff算法称为patching算法,由Snabbdom修改而来,虚拟dom想要转换成真实dom则需要通过patch方法转换;
在vue1.x中每个依赖均有更新函数对应,因此不需要虚拟dom和patching算法支持,但是由于粒度过细,导致vue1.x无法承受较大应用,因此在vue2.x中为了降低watcher粒度,每个组件只有一个watcher与之对应,此时就需要patching算法才能精确找到发生变化的位置并高效更新。
简而言之就是为了提升页面性能,精准高效更新
执行时刻是组件内响应式数据变更触发实例执行其更新函数时,更新函数会再次执行render函数获得最新的虚拟dom,然后执行patch函数,并传入新旧两个虚拟dom,通过对比找到变化的地方,最后将其转换为对应DOM操作
patch过程是一个递归的过程,遵循深度优先同层比较的策略;以vue3为例:
1、先判断两个节点是否为相同同类节点,不同则删除重建
2、如果双方都是文本,则更新文本内容
3、如果双方都是元素节点则递归更新子元素,同时更新元素属性
4、更新子节点又分几种情况:
1)新的子节点是文本,老的子节点是数组则清空,并设置文本
2)新的子节点是文本,老的子节点也是文本则直接更新文本
3)子节点是数组,老的子节点是文本,则清空文本,并创建新子节点数组中的子元素
4)新的子节点是数组,老的子节点也是数组,那么比较两组子节点,更新细节
vue2中是双端算法,先尝试从开头结尾去寻找相同节点,如找到直接做优化做比对,
vue3中引入的更新策略:编译期优化patchFlags、block等