Vue中的虚拟DOM和Diff算法实例分析

这篇文章主要介绍了Vue中的虚拟DOM和Diff算法实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中的虚拟DOM和Diff算法实例分析文章都会有所收获，下面我们一起来看看吧。

创新互联建站是一家集网站建设,济阳企业网站建设,济阳品牌网站建设,网站定制,济阳网站建设报价,网络营销,网络优化,济阳网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

简单介绍一下虚拟DOM 和 diff算法

先用一个简单的例子来说一下 虚拟DOM 和 diff算法：比如有一个户型图，现在我们需要对这个户型图进行下面的改造，

Vue中的虚拟DOM和Diff算法实例分析

其实，这个就是相当于一个进行找茬的游戏，让我们找出与原来的不同之处。下面，我已经将不同之处圈了出来，

Vue中的虚拟DOM和Diff算法实例分析

现在，我们已经知道了要进行哪些改造了，但是，我们该如何进行改造呢？最笨的方法就是全部拆了再重新建一次，但是，在我们实际中肯定不会进行拆除再新建，这样效率太低了，而且代价太昂贵。确实是完成了改造，但是，这不是一个最小量的更新，所以我们想要的是 diff，

Vue中的虚拟DOM和Diff算法实例分析

那么diff是什么呢？其实，diff 在我们计算机中就是代表着最小量更新的一个算法，会进行精细化对比，以最小量去更新。这样你就会发现，它的代价比较小，也不会昂贵，也会比较优化，所以对应在我们 Vue底层中是非常关键的。
好了，现在回归到我们的Vue中，上面的户型图中就相当于vue中的 DOM节点，我们需要对这些节点进行改造（增删调），然后以最小量去更新DOM，这样就会避免我们性能上面的开销。

在这里，我们就可以利用 diff算法进行精细化对比，实现最小量更新。上面我们了解了什么是diff，下面再来简单了解一下什么是虚拟DOM，

通过观察可以发现，虚拟DOM 是一个 JavsScript对象，里面包含 sel选择器，data数据，text文本内容，children子标签等等，一层嵌套一层。这样就表达了一个 虚拟DOM结构，处理虚拟DOM 的方式总比处理真实的DOM 要简单并且高效，所以 diff算法 是发生在 虚拟DOM 上的。
注意：diff算法是发生在虚拟DOM 上的。

为什么需要 Virtual DOM（虚拟DOM）

h函数（创建虚拟DOM）

作用：h函数主要用来产生 虚拟节点（vnode）
第一个参数：标签名字、组件的选项对象、函数
第二个参数：标签对应的属性（可选）
第三个参数：子级虚拟节点，字符串或者是数组形式

好了，上面我们已经知道了h函数是怎么使用的了，下面我们手写一个阉割版的h函数。

手写 h函数

我们手写的这个函数只考虑三种情况（带三个参数），分别如下：

在手写h函数之前，我们需要声明一个函数，用来创建虚拟节点

通过上面的代码，我们已经实现了一个简单 h函数 的基本功能。

感受 diff 算法

在讲解 diff算法之前，我们先来感受一下 diff算法的强大之处。先利用 snabbdom 简单来举一个例子。

当我们点接改变DOM的时候，发现会新增一个 li标签内容为 E，单单的点击事件，我们很难看出，是将 旧的虚拟DOM 全部替换掉 新的虚拟DOM，然后再渲染成真实DOM，还是直接在 旧的虚拟DOM 上直接在后面添加一个节点，所以，在这里我们可以巧妙的打开测试工具，直接将标签内容进行修改，如果点击之后是全部拆除，那么标签的内容就会发生改变，若内容没有发生改变，则是将最后添加的。

果然，之前修改的内容没有发生变化，这一点，就可以验证了是进行了 diff算法精细化的比较，以最小量进行更新。那么问题就来了，如果我在前面添加一个节点呢？是不是也是像在最后添加一样，直接在前面添加一个节点。我们不妨也来试一试看看效果：

哦豁！！跟我们想的不一样，你会发现，里面的文本内容全部发生了变化，也就是说将之前的 DOM 全部拆除，然后将新的重新上树。这时候，你是不是在怀疑其实 diff算法没有那么强大，但是你这样想就大错特错了，回想一下在学习 Vue 的过程中，在遍历DOM节点的时候，是不是特别的强调要写上key唯一标识符，此时，key在这里就发挥了它的作用。我们带上key再来看一下效果：

看到上面的结果，此时此刻，你是不是恍然大悟了，顿时知道了key在循环当中有什么作用了吧。我们可以推出的结论一就是： key是当前节点的唯一标识，告诉 diff算法，在更改前后它们是同一个 DOM节点。

当我们修改父节点，此时新旧虚拟DOM的父节点不是同一个节点，继续来观察一下 diff算法是如何分析的

你会发现，这里将旧节点进行了全部的拆除，然后重新将新节点上树。我们可以推出的结论二就是：
只有是同一个虚拟节点，diff算法 才进行精细化比较，否则就是暴力删除旧的、插入新的。判断同一个虚拟节点的依据：选择器（sel）相同且key相同。

那么如果是同一个虚拟节点，但是子节点里面不是同一层在比较的呢？

你会发现，此时DOM结构同多了一层 section标签包裹着，然后，文本的内容也发生了变化，所以我们可以推出结论三：
diff算法 只进行同层比较，不会进行跨层比较。即使是同一片虚拟节点，但是跨层了，不进行精细化比较，而是暴力删除旧的、然后插入新的。

patch 函数

patch函数的主要作用就是：判断是否是同一个节点类型，是就在进行精细化对比，不是就进行暴力删除，插入新的。
我们在可以简单的画出patch函数现在的主要流程图如下：

在进行上DOM上树之前，我们需要了解一下DOM中的insertBefore（）方法、appendChild（）方法，因为，只有你真正的知道它们两者的用法，才会让你在下面手写上树的时候更加的清晰。

appendChild() 方法：可以向节点的子节点列表的末尾添加新的子节点。比如：appendChild（newchild）。
注意：appendChild（）方法是在父节点中的子节点的末尾添加新的节点。（相对于父节点来说）。

你会发现，创建的div是嵌套在box里面的，div 属于 box 的子节点，box 是 div 的子节点。

insertBefore() 方法：可在已有的字节点前中插入一个新的子节点。比如：insertBefore(newchild,rechild)。
注意：insertBefore（）方法是在已有的节点前添加新的节点。（相对于子节点来说的）。

理解了上面的 appendChild（）方法、insertBefore（）方法之后，我们正式开始让 真实DOM 上树，渲染页面。

上面我们已经明确的知道，patch的作用就是判断是否是同一个节点，所以，我们需要声明一个createElement函数，用来创建真实DOM。

我们已经将创建的真实DOM成功的渲染到页面上去了，但是这只是实现了最简单的一种情况，那就是 h函数第三个参数是字符串的情况，所以，当第三个参数是一个数组的时候，是无法进行上树的，下面我们需要将 createElement函数再进一步的优化，实现递归上树。

我们发现，在第一次上树的时候，createElement函数 有两个参数，分别是：newVnode （新的虚拟DOM），标杆（用来上树插入到某个节点的位置），在createElement内部 我们是使用 insertBefore（）方法 进行上树的，使用这个方法我们需要知道已有的节点是哪一个，当然，当有 text（第三个参数是字符串或数字）的时候，我们是可以找到要插入的位置的，但是当有 children（子节点）的时候，我们是无法确定标杆的位置的，所以，我们要将上树的工作放到 patch函数 中，即 createElement函数 就只负责创建节点。

经过上面的分析，我们已经完成了对createElem函数的完善，可能你对这个递归有点不了解，那么大概捋一下进行的过程：

完美！我们成功的将递归子节点完成了，无论嵌套多少层，我们都可以通过递归将子节点渲染到页面上。

前面，我们实现了不是同一个节点的时候，进行删除旧节点和插入新节点的操作，下面，我们来实现是相同节点时的相关操作，这也是文章中最重要的部分，diff算法 就包含在其中！！！

上面的 patch函数 流程图中，我们已经处理了不同节点的时候，进行暴力删除旧的节点，然后插入新的节点，现在我们进行处理相同节点的时候，进行精细化的比较，继续完善 patch函数的主流程图：

看到上面的流程图，你可能会有点疑惑，为什么不在 newVnode 是否有 Text属性中继续判断 oldVnode 是否有 children 属性而是直接判断两者之间的 Text 是否相同，这里需要提及一个知识点，当我们进行 DOM操作的时候，文本内容替换DOM的时候，会自动将DOM结构全部销毁掉，innerText改变了，DOM结构也会随之被销毁，所以这里可以不用判断 oldVnode 是否存在 children 属性，如果插入DOM节点，此时的Text内容并不会被销毁掉，所以我们需要手动的删除。这也是为什么在流程图后面，我们添加 newVnode 的children 的时候需要将 oldVnode 的 Text 手动删除，而将 newVnode 的 Text 直接赋值给oldVnode.elm.innerText 的原因。
知道上面流程图是如何工作了，我们继续来书写patch函数中是同一个节点的代码。

在patch函数中，我们需要将同同一节点的比较分成一个单独的模块patchVnode函数，方便我们在diff算法中进行递归运算。