什么是虚拟Dom

最新推荐文章于 2025-04-03 15:21:48 发布

转载最新推荐文章于 2025-04-03 15:21:48 发布 · 912 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/gaosong-shuhong/p/9253959.html

文章标签：

#vue

一、前言

虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可；继react之后vue2.0也在其核心引入了虚拟DOM的概念，本文将以vue2.0使用的snabbdom入手，来介绍虚拟DOM的主要实现原理。

二、虚拟DOM

在开始介绍snabbdom之前我们想来想两个问题，

（1）什么是虚拟DOM？

vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息，如下图：

可见左边的DOM结构，不论是标签名称还是标签的属性或标签的子集，都会对应在右边的树结构里。

（２）为什么要使用虚拟DOM？

之前使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情，往往是DOM标签和js逻辑同时写在js文件里，数据交互时不时还要写很多的input隐藏域，如果没有好的代码规范的话会显得代码非常冗余混乱，耦合性高并且难以维护。

另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，vdom就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。

（3）vdom如何使用？

下面我将使用snabbdom的用法介绍一下vdom的使用。

三、snabbdom

要了解snabbdom的话有必要先去github上先了解下snabbdom： https://github.com/snabbdom/snabbdom

在这里看到官方给的一个example

这里可以看到列出来的两个主要的核心函数，即h()函数和patch()函数，我们先来看下h()函数：

h函数

可以看到创建的虚拟DOM树里面的结构在左边的vnode里都有体现，所以现在看来我们的虚拟DOM结构树和snabbdom中的h()函数是完全可以对应起来的，可以通过一个方法将虚拟DOM结构转化成vnode；而上图中newVnode则指的是虚拟DOM树中的数据发生变化之后生成的vnode。

我们在回过头来看patch()函数

patch函数

patch函数的执行分为两个阶段，两次传递的参数都是两个

第一阶段为虚拟dom的第一次渲染，传递的两个参数分别是放真实DOM的container和生成的vnode，此时patch函数的作用是用来将初次生成的真实DOM结构挂载到指定的container上面。

第二阶段传递的两个参数分别为vnode和newVnode，此时patch函数的作用是使用diff算法对比两个参数的差异，进而更新参数变化的DOM节点；

可以发发现h函数和patch函数在cnabbdom中实现vdom到真实DOM的转化起到了至关重要的作用，那么还有一个很重要的环节，patch函数中是怎么样实现对比两个vnode从而实现对真实DOM的更新的呢，这里还要提一下snabbdom的另外一个核心算法，即diff算法。

diff算法

其实在我们日常开发中我们都在接触类似与diff算法的一些软件，比如svn可以看到当前代码和svn服务器上代码的不同之处，再如Beyond Compare这款软件也可以为我们指出两个对比文件的不同之处

但是此处是如何实现对vnode的对比的呢？参考以下代码：

 1 function updateChildren(vnode, newVnode) {      // 创建对比函数
 2     var children = vnode.children || []         
 3     var newChildren = newVnode.children || []
 4 
 5     children.forEach(function(childrenVnode, index) {
 6         var newChildVnode = newChildren[index]  // 首先拿到对应新的节点
 7         if (childrenVnode.tag === newChildVnode.tag) {    // 判断节点是否相同
 8             updateChilren(childrenVnode, newChildVnode)   // 如果相同执行递归，深度对比节点
 9         } else {
10             repleaseNode(childrenVnode, newChildVnode)    // 如果不同则将旧的节点替换成新的节点
11         }
12     })
13 }
14 
15 
16 function repleaseNode(vnode, newVnode) {    // 节点替换函数
17     var elem = vnode.elem
18     var newEle = createElement(newVnode)
19 }

[

此处简单的列举了一下diff算法的原理，以上是最简单的对比，更复杂的对比函数包括对节点的增删以及其它的节点逻辑就不一一赘述了，这里最重要的一部分就是递归的使用，才能将vnode进行深度对比。

四、小结

虚拟DOM在目前流行的几大框架中都作为核心的一部分使用，可见其性能的高效，本文只是简单的通过列举vue中使用的snabbdom库做一个简单的剖析，想要更深层次的理解vdom还有很长的路要走，本文如有不当之处，还劳烦路过大佬批评指出。