Vue面试题10：说一说Vue的Diff算法相关

你了解Diff算法吗？

• 思路

  • 1.diff算法是干什么的
  • 2.它的必要性
  • 3.它何时执行
  • 4.具体执行方式
  • 5.拔高：说一下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为例：
      ①首先判断两个节点是否为相同同类节点（isSameVNodeType()，判断key、类型、标签），不同则删除重新创建；
      ②如果双方都是文本则更新文本内容；
      ③如果双方都是元素节点则递归更新子元素，同时更新元素属性；
      更新子节点时又分了几种情况：
      ①新的子节点是文本，老的子节点是数组则清空，并设置文本；
      ②新的子节点是文本，老的子节点是文本则直接更新文本；
      ③新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
      ④新的子节点是数组，老的子节点也是数组，那么比较两组子节点；
      Vue3中引入的更新策略：编译期优化patchFlags、block等