快速搞懂Vue2 diff算法（图文详解）

diff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历。那么大家对diff算法吗有多少了解？下面本篇文章就来带大家深入解析下vue2的diff算法，希望对大家有所帮助！

看 Vue 2 的源代码已经很久了，从用 flow 到如今使用 TypeScript，我每次都会打开它的源代码看一看，但是每次都只看到了 数据初始化 部分，也就是 beforeMount 的阶段，对于如何生成 VNode（Visual Dom Node， 也可以直接称为 vdom） 以及组件更新时如何比较 VNode（diff）始终没有仔细研究，只知道采用了 双端 diff 算法，至于这个双端是怎么开始怎么结束的也一直没有去看过，所以这次趁写文章的机会仔细研究一下。如果内容有误，希望大家能帮我指出，非常感谢~

什么是 diff ?

在我的理解中，diff 指代的是 differences，即 新旧内容之间的区别计算；Vue 中的 diff 算法，则是通过一种 简单且高效 的手段快速对比出 新旧 VNode 节点数组之间的区别 以便 以最少的 dom 操作来更新页面内容。【