虚拟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的一些理解
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 上一篇：Vue原理解析（三）：快速搞懂new Vue()时到底做了什么？（下） 在经过初始化阶段之后，即将开始组件...
- 文章结构： React中的虚拟DOM是什么？ 虚拟DOM的简单实现（diff算法） 虚拟DOM的内部工作原理 Re...
- 1.为什么需要虚拟DOM DOM是很慢的，其元素非常庞大，页面的性能问题由JS引起的，大部分都是由DOM操作引起的...
- 上一篇：Vue原理解析（四）：你知道被大家聊烂了的虚拟Dom是怎么生成的吗？ 再有一棵树形结构的JavaScrip...
