对虚拟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中。

你可能感兴趣的:(对虚拟DOM的一些理解)