Diff算法

---

思路：

1. 定义
2. 特点
3. 作用
4. 必要性
5. 何时执行
6. 具体的执行方式
7. Vue3中的优化

回答

1. Vue的Diff算法一种通过同层的树节点进行比较的高效算法，一开始是参考了开源的Snabbdom。
2. Diff算法主要有2个特点：
   • 深度优先，同层比较
   • 比较的过程中使用的是双指针，从两边向中间收拢进行比较
3. Vue的每个组件都有一个watcher对应，引入diff算法主要是为了精确找到发生变化的地方进行高效更新。
4. diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，执行patch函数，并传入新旧两次的虚拟DOM，通过比对两者找到需要更新的节点，最后将虚拟DOM转换成真实DOM。
5. patch过程是一个递归过程，遵循深度优先、同层级比较的策略：

• 首先判断两个节点是否相同同类节点，不同则删除重新创建
• 如果双方都是文本，则更新文本内容
• 如果双方都是元素节点，则递归更新子元素，同时更新元素属性
• 更新子节点时又分了几种情况：
  • 新的子节点是文本，老的子节点是数组则清空，并设置文本
  • 新的子字节是文本，老的子节点是文本则直接更新文本
  • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
  • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节

Vue3中引入更新策略：编译期优化patchFlags、block等