关于对虚拟DOM的理解

在Vue和React框架中，都有一个虚拟DOM的概念，那么虚拟DOM到底是个什么东西呢？

在这里，我有一些自己的理解分享给大家。

 

首先，虚拟DOM的本身是一个JS的对象，总体来说就是，操作JS对象比操作DOM的速度更快，这是其根本。

下面，我们来了解一下虚拟DOM具体的作用。

传统操作DOM的方法，会重新渲染某个节点的html代码。然后再重新创建所有的DOM元素。这样比较消耗性能以及速度较慢。

而操作虚拟DOM的话，虚拟DOM会更改某一个节点的html代码。然后通过diff来计算，再修改需要修改的DOM元素。所以性能消耗较少。

 

接下来是我对diff的一个理解，比较浅、

首先，操作DOM的的情况下，会对新旧DOM树进行一个循环遍历的比较，一一对比之后，然后再对所有的DOM元素进行重新创建渲染，

而虚拟DOM的话，模拟一个DOM树，里面都是虚拟DOM对象，虚拟DOM对象相对于DOM对象更加简单，只有几个重要的属性，更加轻便。

然后虚拟DOM也会进行一个遍历对比，然后对有做修改的虚拟DOM进行比较，得出最小差异，然后再去修改真实DOM。