一篇文章教会你如何将DOM转换为virtual DOM

【1、Virtual DOM简介】

Virtual DOM是虚拟节点，它经过Javascript的Object对象模拟DOM中的节点，而后经过特定的render方法将其渲染成真实的DOM节点。

浏览器在处理DOM时，总会附加不少属性，这会使得每一次数据更新，渲染很慢。

Virtual　DOM利用Javascript作了中间层，Javascript记录状态，将每一次状态中的变化同步到视图中。

【2、virtual DOM的优势】

1. 保证性能下限，以及跨平台。

2. 无需手动操做DOM，只须要写好 View-Model 的代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮咱们以可预期的方式更新视图，极大提升咱们的开发效率。

3. 虚拟DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操做，这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想。

【3、项目实施】

首先咱们来简单的模拟vue是如何生成虚拟DOM的，超简版！！！

是否有点眼熟呢！没错，在使用Vue搭建的脚手架里面的main.js文件里面包含了这个代码块,接下来咱们须要对咱们new出来的Vue对象进行处理。

咱们将基于Class VNode 这个类进行实现，以下图所示：

tag表明的是标签；

data表明的是属性；

value表明的值；

type表明的是类型；

children表明的是子级。

虚拟DOM 转换代码以下:

如今分析一下转换的过程：

1.先理解nodeType表明的是什么?

nodeType为1则表明元素，nodeType为3则表明文本。

2.当nodeType==1的状况下反过来再看看class VNode的构造函数须要的是什么？

须要什么咱们就从DOM身上拿,nodeName表明标签、_propertyObj表明属性、nodeType表明类型元素身上是没有文本的（由于nodeType为1表明元素，nodeType为3表明文本，当前的nodeType==1因此没有文本，表明元素），因此value这个字段直接传undefined。

3.把new出来的对象实例赋给_vnode，紧接着拿出当前元素的全部子元素 进行遍历递归写入_vnode中的children。

4.元素的处理结束了，nodeType==3 的状况下既然是文本确定没有标签以及属性因此直接传undefined值则用node.nodeValue取，一样nodeType也表明类型，每次递归进来会对不一样类型作不一样的处理。

【5、总结】

1. 前端热门框架Vue,React都使用了virtual DOM，其目的之一是为了提升性能，了解如何将DOM转换为virtual DOM，就是在学习Vue的底层原理。

2. Vue中的diff算法就是将DOM树同级进行对比，学习virtual DOM就是学习diff算法的前置知识点。

3. 虽然这个知识点在日常的开发中几乎不会用到，可是其中包含的思想确实值得咱们学习的，蜻蜓点水不是学习，多想多练才是，但愿对您有所帮助！