【Vue原理】Diff - 白话版

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


专注 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