【Vue原理】Diff - 白话版

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


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

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧

【Vue原理】Diff - 白话版

终于到了最后一块内容了！今天咱们就来简单归纳一下 Diff，内容一点都很少哦，全是图片

Diff 做为 Vue 比较重要的一部份内容，仍是很是有必要深刻了解的

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

一、Diff 的做用

二、Diff 的作法

三、Diff 的比较逻辑

四、简单的例子

下面就开始咱们的正文

---

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 的比较逻辑

一、能不移动，尽可能不移动

二、没得办法，只好移动

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

比较处理流程是下面这样

在新旧节点中

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

二、再找相同可是须要移动的节点，消耗第二小

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

比较是为了修改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

而后页面就完成更新啦

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

后面的就会出源码版啦

最后

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