vue的diff算法他做了什么

Vue 的 Diff 算法主要用于对比新旧虚拟 DOM，找出差异并更新真实 DOM，以最小化 DOM 操作，提高更新效率。其具体工作如下：

同级比较

• Diff 算法会对新旧虚拟 DOM 树的同一层级节点进行比较。例如，在一个列表中，如果列表项的顺序发生了变化，Diff 算法会在同一层级去对比每个列表项的虚拟 DOM，而不会跨层级进行比较。

节点类型判断

• 当遍历到每个节点时，首先会判断节点的类型。如果是不同类型的节点，例如一个是div节点，另一个是p节点，那么会直接认为这两个节点不同，将旧节点替换为新节点。
• 如果是相同类型的节点，如都是div节点，则会继续比较它们的属性和子节点。

属性比较与更新

• 对于相同类型的节点，Diff 算法会比较它们的属性。如果属性有变化，例如class名称、style样式或其他自定义属性发生了改变，会将新的属性值更新到真实 DOM 节点上。

子节点比较与更新

• 旧有子节点遍历：Diff 算法会先遍历旧虚拟 DOM 节点的子节点，并使用一个对象来记录每个子节点的key值和对应的索引位置，以便后续快速查找和比较。

• 新子节点遍历与更新：然后遍历新虚拟 DOM 节点的子节点，对于每个新子节点，会根据其key值在旧子节点的索引对象中查找对应的旧子节点。

  • 有相同 key 的子节点：如果找到了具有相同key的旧子节点，且子节点本身也是相同类型（标签名相同），则会继续递归地比较和更新它们的子节点，以及更新当前节点的属性。
  • 没有相同 key 的子节点：如果在旧子节点中没有找到对应的key，则认为这是一个新增的子节点，会在真实 DOM 中创建该新节点并插入到相应位置。

• 旧有子节点删除：在遍历完新子节点后，再检查旧子节点中是否有未被处理的节点，这些节点就是在新虚拟 DOM 中被删除的节点，Diff 算法会在真实 DOM 中删除这些节点。

优化策略

• 静态节点优化：Vue 会识别出那些在渲染过程中不会发生变化的静态节点，在 Diff 算法中会跳过对这些节点的比较和更新，直接复用之前的渲染结果，进一步提高性能。
• 基于 key 的优化：通过给列表项指定唯一的key值，Diff 算法能够更准确地识别出哪些节点是新增的、哪些是移动的、哪些是删除的，从而避免不必要的 DOM 操作。如果没有key，Diff 算法只能按照顺序依次比较子节点，可能会导致大量错误的移动或重复创建节点的操作，影响性能。