简单了解diff算法

作用

• Vue中的diff算法称为patching算法，它由Snabbdom修改⽽来，虚拟DOM要想转化为真实DOM就需要通过patch⽅法转换。

必要性

• 最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法⽀持，但是这样粒度过细导致Vue1.x⽆法承载较⼤应⽤；Vue 2.x中为了降低Watcher粒度，每个组件只有⼀个Watcher与之对应，此时就需要引⼊patching算法才能精确找到发⽣变化的地⽅并⾼效更新。

何时执⾏

• vue中diff执⾏的时刻是组件内响应式数据变更触发实例执⾏其更新函数时，更新函数会再次执⾏render函数获得最新的虚拟DOM，然后执⾏patch函数，并传⼊新旧两次虚拟DOM，通过⽐对两者找到变化的地⽅，最后将其转化为对应的DOM操作。

具体执⾏⽅式

• patch过程是⼀个递归过程，遵循深度优先、同层⽐较的策略；以vue3的patch为例：
  • ⾸先判断两个节点是否为相同同类节点，不同则删除重新创建
  • 如果双⽅都是⽂本则更新⽂本内容
  • 如果双⽅都是元素节点则递归更新⼦元素，同时更新元素属性
  • 更新⼦节点时⼜分了⼏种情况：
  • 新的⼦节点是⽂本，⽼的⼦节点是数组则清空，并设置⽂本；
  • 新的⼦节点是⽂本，⽼的⼦节点是⽂本则直接更新⽂本；
  • 新的⼦节点是数组，⽼的⼦节点是⽂本则清空⽂本，并创建新⼦节点数组中的⼦元素；
  • 新的⼦节点是数组，⽼的⼦节点也是数组，那么⽐较两组⼦节点，更新细节blabla

vue3中引⼊的更新策略：编译期优化patchFlags、block等

patch关键代码

• github1s.com/vuejs/core/…