什么是diff算法？
VueJs 249
什么是diff算法？
思路
- diff算法是⼲什么的
- 它的必要性
- 它何时执⾏
- 具体执⾏⽅式
- 拔⾼：说⼀下vue3中的优化
回答范例
1、Vue中的diff算法称为patching算法，它由Snabbdom修改⽽来，虚拟DOM要想转化为真实DOM就需要通过patch⽅法转换。
2、最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法⽀持，但是这样粒度过细导致Vue1.x⽆法承载较⼤应⽤；Vue 2.x中为了降低Watcher粒度，每个组件只有⼀个Watcher与之对应，此时就需要引⼊patching算法才能精确找到发⽣变化的地⽅并⾼效更新。
3、vue中diff执⾏的时刻是组件内响应式数据变更触发实例执⾏其更新函数时，更新函数会再次执⾏render函数获得最新的虚拟DOM，然后执⾏patch函数，并传⼊新旧两次虚拟DOM，通过⽐对两者找到变化的地⽅，最后将其转化为对应的DOM操作。
4、patch过程是⼀个递归过程，遵循深度优先、同层⽐较的策略；
以vue3的patch为例：
⾸先判断两个节点是否为相同同类节点，不同则删除重新创建如果双⽅都是⽂本则更新⽂本内容。
如果双⽅都是元素节点则递归更新⼦元素，同时更新元素属性
更新⼦节点时⼜分了⼏种情况：
新的⼦节点是⽂本，⽼的⼦节点是数组则清空，并设置⽂本；
新的⼦节点是⽂本，⽼的⼦节点是⽂本则直接更新⽂本；
新的⼦节点是数组，⽼的⼦节点是⽂本则清空⽂本，并创建新⼦节点数组中的⼦元素；
6、vue3中引⼊的更新策略：编译期优化patchFlags、block等。
知其所以然
patch关键代码
https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L354-L355