vue的diff算法

Vue 的 diff 算法是 Vue 框架中用于优化虚拟 DOM 更新性能的关键部分。当组件的状态发生变化时，Vue 不会直接操作真实的 DOM，而是先生成一个新的虚拟 DOM 树，然后与旧的虚拟 DOM 树进行比较，找出差异，并最小化地更新真实的 DOM。这个比较的过程就是 diff 算法。

 

Vue 的 diff 算法主要基于以下策略：

 

节点类型比较：首先，Vue 会比较新旧两个节点的类型。如果节点类型不同，Vue 会直接删除旧节点并创建新节点。

深度优先遍历：对于相同类型的节点，Vue 会进行深度优先遍历，递归地比较子节点。

键值比较：当列表中的节点具有唯一的键（key）时，Vue 可以更准确地识别哪些节点是新的、哪些节点是旧的、哪些节点需要被移动。这使得列表的更新更加高效。

优化策略：Vue 还采用了一些优化策略，如避免不必要的节点比较和更新。例如，当父节点和子节点都没有发生变化时，Vue 会跳过对子节点的比较。

需要注意的是，虽然 diff 算法可以提高性能，但它并不是万能的。在某些复杂的场景下，可能需要结合其他优化手段来进一步提高性能。此外，Vue 的 diff 算法也有一些局限性，例如对于跨层级的节点移动，Vue 可能无法进行有效的优化。

总的来说，Vue 的 diff 算法是 Vue 框架中非常重要的一部分，它使得 Vue 在处理复杂的 UI 更新时能够保持高效的性能。

时间复杂度：个树的完全 diff算法是⼀个时间复杂度为 O(n*3），vue进⾏优化转化成 O(n)。 最⼩量更新， key很重要。这个可以是这个节点的唯⼀标识，告诉 diff算法，在更改前后它们是同⼀个DOM节点扩展 v-for为什么要有 key，没有 key会暴⼒复⽤，举例⼦的话随便说⼀个⽐如移动节点或者增加节点（修改DOM），加 key只会移动减少操作DOM。

只有是同⼀个虚拟节点才会进⾏精细化⽐较，否则就是暴⼒删除旧的，插⼊新的。

只进⾏同层⽐较，不会进⾏跨层⽐较。

diff算法的优化策略：四种命中查找，四个指针

1. 旧前与新前（先⽐开头，后插⼊和删除节点的这种情况）

2. 旧后与新后（⽐结尾，前插⼊或删除的情况）

3. 旧前与新后（头与尾⽐，此种发⽣了，涉及移动节点，那么新前指向的节点，移动到旧后之后）

4. 旧后与新前（尾与头⽐，此种发⽣了，涉及移动节点，那么新前指向的节点，移动到旧前之前）