虚拟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中。
网友评论