Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前， 若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。 所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
虚拟DOM是什么？
比如说我们要操作一个数据报表，大概有几百条数据，要对其进行排序的操作，若使用原生JS来操作，对DOM元素进行一个排序操作起来很麻烦，也很难实现。
于是就有了MVVM的框架，比如VUE,react框架，实现上面的操作会很简单，有数据就对应页面上的DOM结构，只需要对数据排序就DOM结构自然也就排序了。 这是它的使用，但是如何实现昵？
若数据改变就需要全部删掉重新创建吗？这样就会消耗巨大。当数据量大的话，为什么操作DOM元素会很卡顿昵?可以console.log一下DOM结构，可以看一下里面的属性，DOM结构在控制台打印出来以后也是一个对象，这个对象里面的数据结构特别复杂，比如说一个span就对应着上百条的数据，对其操作就附带着所有的数据和渲染，性能开销很大。
那么我们就可以根据这个DOM结构自己使用一个JS创建一个数据结构，和真实的DOM一一映射。操作的时候就操作自己的数据结构，这个数据结构很少，数据量很小，不管是进行排序还是处理也好，就可以处理好之后再变成一个真实的DOM，换句话说就是使用虚拟的数据结构代表了我们要展示的DOM结构，对这个虚拟的数据结构操作完成之后，再把它进行一个渲染，这样就变成了一个真实的数据。这样做的好处就是，假设我们的DOM做了一个轻微的改变，那么需要做的事情就是只需要对比俩次虚拟的DOM，看那个地方做了改变，然后在渲染DOM的时候只需要把改变的 地方打补丁放在页面结构上就可以了。
实际上虚拟DOM就是根据真实的DOM一一映射的数据结构，然后对数据结构进行操作，最终把这个数据结构的变化反映在真实的DOM中。
