vue的diff算法

vue的diff算法

diff算法是做什么的？

vue中diff算法称为patching算法，由Snabbdom修改而来，虚拟dom想要转换成真实dom则需要通过patch方法转换；

diff算法的必要性

在vue1.x中每个依赖均有更新函数对应，因此不需要虚拟dom和patching算法支持，但是由于粒度过细，导致vue1.x无法承受较大应用，因此在vue2.x中为了降低watcher粒度，每个组件只有一个watcher与之对应，此时就需要patching算法才能精确找到发生变化的位置并高效更新。
简而言之就是为了提升页面性能，精准高效更新

diff算法何时执行

执行时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟dom，然后执行patch函数，并传入新旧两个虚拟dom，通过对比找到变化的地方，最后将其转换为对应DOM操作

diff算法具体执行方式

patch过程是一个递归的过程，遵循深度优先同层比较的策略；以vue3为例：
1、先判断两个节点是否为相同同类节点，不同则删除重建
2、如果双方都是文本，则更新文本内容
3、如果双方都是元素节点则递归更新子元素，同时更新元素属性
4、更新子节点又分几种情况：
1）新的子节点是文本，老的子节点是数组则清空，并设置文本
2）新的子节点是文本，老的子节点也是文本则直接更新文本
3）子节点是数组，老的子节点是文本，则清空文本，并创建新子节点数组中的子元素
4）新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节

vue3中的优化

vue2中是双端算法，先尝试从开头结尾去寻找相同节点，如找到直接做优化做比对，
vue3中引入的更新策略：编译期优化patchFlags、block等