Vue原理Diff-白话版

jiezi

5 年前

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

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

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

【Vue 原理】Diff – 白话版

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

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

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

1、Diff 的作用

2、Diff 的做法

3、Diff 的比较逻辑

4、简单的例子

下面就开始我们的正文

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

这样消耗就会小一些

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

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

也可以说成是

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

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

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

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

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

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

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

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

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

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

所以他们才有比较的机会

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

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

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

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

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

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

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

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

2、没得办法，只好移动

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

在新旧节点中

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

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

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

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

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

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

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

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

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

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

而是直接移动 DOM

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

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

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

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

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

毫无疑问，找到 2

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

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

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

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

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

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

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

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

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

然后页面就完成更新啦

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

后面的就会出源码版啦

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

Vue原理Diff-白话版

Diff 作用

Diff 做法

新旧节点是什么

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

Diff 比较逻辑

下面说说 Diff 的比较逻辑

比较处理流程是下面这样

比较是为了修改 DOM 树

Diff 简单例子

第一轮比较开始

第二轮比较开始

第三轮比较开始

最后