写文章不容易，点个赞呗兄弟

专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者拉到下面关注公众号也可以吧

【Vue原理】Diff - 白话版

终于到了最后一块内容了！今天我们就来简单概括一下 Diff，内容一点都不多哦，全是图片

Diff 作为 Vue 比较重要的一部分内容，还是非常有必要深入了解的

此篇文章就会分几块内容进行简单阐述，不会出现任何的源码，只是为了帮助大家建立一种思路，了解下 Diff 的大概内容

1、Diff 的作用

2、Diff 的做法

3、Diff 的比较逻辑

4、简单的例子

下面就开始我们的正文

Diff 作用

Diff 的出现，就会为了减少更新量，找到最小差异部分DOM，只更新差异部分DOM就好了

这样消耗就会小一些

数据变化一下，没必要把其他没有涉及的没有变化的DOM 也替换了

Diff 做法

Vue 只会对新旧节点中父节点是相同节点的那一层子节点进行比较

也可以说成是

只有两个新旧节点是相同节点的时候，才会去比较他们各自的子节点

最大的根节点一开始可以直接比较

这也叫做同层级比较，并不需要递归，虽然好像降低了一些复用性，也是为了避免过度优化，是一种很高效的 Diff 算法

新旧节点是什么

所有的新旧节点指的都是 Vnode 节点，Vue 只会比较 Vnode 节点，而不是比较 DOM

因为 Vnode 是 JS 对象，不受平台限制，所以以它作为比较基础，代码逻辑后期不需要改动

拿到比较结果后，根据不同平台调用相应的方法进行处理就好了

想了解 Vnode 更多信息可以转到这篇文章 VNode - 源码版

父节点是相同节点是什么意思？

比如下图出现的四次比较（从 first 到 fouth），他们的共同特点都是有相同的父节点

比如蓝色方的比较，新旧子节点的父节点是相同节点 1

比如红色方的比较，新旧子节点的父节点都是 2

所以他们才有比较的机会

而下图中，只有两次比较，就是因为在蓝色方比较中，并没有相同节点，所以不会再进行下级子节点比较

Diff 比较逻辑

Diff 比较的内核是节点复用，所以 Diff 比较就是为了在新旧节点中找到相同的节点

这个的比较逻辑是建立在上一步说过的同层比较基础之上的

所以说，节点复用，找到相同节点并不是无限制递归查找

比如下图中，的确旧节点树和新节点树中有相同节点 6，但是然并卵，旧节点6并不会被复用

就算在同一层级，然而父节点不一样，依旧然并卵

只有这种情况的节点会被复用，相同父节点 8

下面说说 Diff 的比较逻辑

1、能不移动，尽量不移动

2、没得办法，只好移动

3、实在不行，新建或删除

比较处理流程是下面这样

在新旧节点中

1、先找到不需要移动的相同节点，消耗最小

2、再找相同但是需要移动的节点，消耗第二小

3、最后找不到，才会去新建删除节点，保底处理

比较是为了修改DOM 树

其实这里存在三种树，一个是页面DOM 树，一个是旧VNode 树，一个是新 Vnode 树

页面DOM 树和旧VNode 树节点一一对应的

而新Vnode 树则是表示更新后页面DOM 树该有的样子

这里把旧Vnode 树和新Vnode树进行比较的过程中

不会对这两棵Vode树进行修改，而是以比较的结果直接对真实DOM 进行修改

比如说，在旧 Vnode 树同一层中，找到和新Vnode 树中一样但位置不一样节点

此时需要移动这个节点，但是不是移动旧 Vnode 树中的节点

而是直接移动 DOM

总的来说，新旧 Vnode 树是拿来比较的，页面DOM 树是拿来根据比较结果修改的

如果你有点懵，我们就来就简单说个例子

Diff 简单例子

比如下图存在这两棵需要比较的新旧节点树和一棵需要修改的页面 DOM树

第一轮比较开始

因为父节点都是 1，所以开始比较他们的子节点

按照我们上面的比较逻辑，所以先找相同 && 不需移动的点

毫无疑问，找到 2

拿到比较结果，这里不用修改DOM，所以 DOM 保留在原地

第二轮比较开始

然后，没有相同 && 不需移动的节点了

只能第二个方案，开始找相同的点

找到节点5，相同但是位置不同，所以需要移动

拿到比较结果，页面 DOM 树需要移动DOM 了，不修改，原样移动

第三轮比较开始

继续，哦吼，相同节点也没得了，没得办法了，只能创建了

所以要根据新Vnode 中没找到的节点去创建并且插入

然后旧Vnode 中有些节点不存在新VNode 中，所以要删除

于是开始创建节点 6 和 9，并且删除节点 4 和 5

然后页面就完成更新啦

怎么样，有没有感兴趣，感兴趣就看源码吧哈哈

后面的就会出源码版啦

最后

鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵，如果有任何描述不当的地方，欢迎后台联系本人，有重谢