说实话，Vue 的 Diff 算法真的是个让人又爱又恨的东西，爱的是它Neng让我们的应用跑得飞快，恨的是它有点难以捉摸，哈哈。

咱就是说当数据发生变化时Vue 会生成一颗新的虚拟 DOM 树，这时候 Diff 算法就派上用场了它的任务就是对比新旧两棵树，以Zui小的性Neng代价完成真实 DOM 的geng新。

Diff 算法基于两个基本假设，从而将时间复杂度从 O 降低到了 O：

是同层比较，算法只会对同一层级的节点进行比较，不会跨层级操作，你懂的，这样Ke以大大减少比较的次数。

然后是深度优先，通过递归的方式，先处理子节点，再处理父节点，这样Ke以确保节点的顺序是正确的。

Diff 的过程主要由 patchpatchVnode 和 updateChildren 三个函数协同完成。

patch 函数是 Diff 的起点，它负责决定是直接替换整个节点，还是深入比对，比较策略如下:

Ru果新旧节点完全不同，直接替换；Ru果相似，则调用patchVnode进一步比较。

当确定两个节点“值得比较”时执行以下逻辑：

判断新节点是否为文本节点，Ru果是的话，则直接geng新dom的文本内容为新节点的文本内容。

Ru果新旧节点dou不是文本节点，则说明两者dou有子节点，接下来就进updateChildren函数进行下一步比较并geng新子节点

这是 Vue Diff 的灵魂。它通过 “双端指针” 向中间靠拢，寻找可复用的节点。

updateChildren函数对会新旧两个节点设置4个指针，分别指向新头、旧头、新尾、旧尾，它主要对5种情况进行比较：

是旧头新头进行比较：Ru果二者相同，就对二者执行patchVnode，并将旧头新头两个指针向中间移动。

Ru果旧头新头不相同，就进行旧尾新尾的比较：Ru果旧尾新尾相同的话，则将旧尾新尾两指针向中间移动。

Ru果旧头与新头，旧尾与新尾dou不相同：那就进行交叉比较，比较方式如下：

旧头新尾、旧尾新头，Ru果有相同的，就复用，并进行相应的 DOM 操作。

举个例子来kankan updateChildren 是怎么工作的吧

假设有这样一组新旧节点：

A, B, C, DC, D, A, B, E, F 

旧节``startIndex和 endIndex dou保持不动。 四次循环中，发现了新头旧头相同，于是 diff 后创建了 A 的真实节点，插入到前一次创建的 E 节点后面。同时旧节点的 startIndex 移动到了 B，新节点的startIndex 移动到了 B 第五次循环中，发现了 新 头 发现了 新 头 发现了 新 头 发现了 新 头 同样 ， d i ff 后创建 了 B 真实 节 点 同样 ， d i ff 后创建 了 B 真实 节 点 同样 ， d i ff 后创 建 了 B 真 实 节 点 同时 ， startIndex移 动 到 了 F ， endIndex移 动 到 了 F 。 Zui后一次循环中，发现在 在 在 在 在 在 在 在 没有找 到 F 节 点 ， 这 时 直 接 创建 F 对 应 的 真 实 节 点 ， 直 接 将 其插入 到 B 节 点 后 面 ， 并 将 新 头 指 针 向 后 移 动 一 位 ， 发 现startIndex大于endIndex ， 这 时循环 结 束 。 害，通过上面的例子，是不是对 updateChildren 有了一定的了解呢？

Vue 的 Diff算法就是 比，较dom树的新老节，一边较一边给真dom移、入或者除节。通 “双 端 指” 向 中 靠拢 ， 复 用 节 点 , Zui 大 程 度 地减少DOM操作，从而提高性Neng。 说实话，要真的掌握 Diff 算法，还是需要花一定的时间的，但只要你耐心kan下去，相信你一定Neng搞定它！ 咱就是说其实 Diff 算法还有hen多细节值得深入探讨，但本文篇幅有限，就先到这里吧，希望你Neng有所收获，你懂的。