虚拟DOM

　　关于虚拟DOM，在vue和react中都运用了虚拟DOM,那么虚拟DOM是什么呢？

　　首先来了解下虚拟DOM的概念是什么。虚拟DOM是一个真实的JavaScript对象，是一个有JavaScript模拟的DOM结构树。

　　那么虚拟DOM有哪些优缺点呢？

　　优点：1、更高效；2、可复用；3、减少对实际DOM的操作；

　　缺点： 当第一次渲染页面时，由于多了一层虚拟DOM算法，会相应的多耗费性能。

　　那么为什么要使用虚拟DOM呢？

　　因为操作实际DOM时，每次更新数据，都会时页面重新渲染，这样容易引起回流和重绘。而操作虚拟DOM则会尽可能减少这个问题。

　　那么虚拟DOM的原理是什么呢？

　　因为操作ｊｓ对象比操作实际DOM会更快，所以更高效。虚拟DOM有一个diff算法；这个算法有两个特点：分别是同级比较和就近复用。

同级比较是，对比新旧两个虚拟DOM对象时，只会比较同一级的节点，如果节点类型不同，会直接把旧的节点覆盖。就近复用是，如果两个节点类型一样，那么会使用旧的节点或者对旧的节点进行更新，而不是按照严格的比较各个属性是否一样。也因此可复用。当然有时我们并不希望节点复用，此时加个ｋｅｙ值使节点唯一，这样会认为这不是同一个节点，就可以避免复用。当然ｋｅｙ值的作用不仅于此，因为当我们修改虚拟DOM时，需要寻找DOM结构，加了ｋｅｙ值后可以更快的查找到改节点。可以节约性能。

　　　　最后简单介绍一个diff算法：当比较两个虚拟DOM时，无非是以下几种情况：

　　　　　１、节点类型不一样：采取重新创建一个新的节点覆盖旧的节点；

　　　　　2、节点类型一样，但属性值或属性不一样：采取复用该节点，但会更新该节点的属性和属性值；

　　　　　3、其他都一样，仅文本不一样：此时采取的方法同上，只是会修改文本节点；

　　　　　4、DOM的增删改和移动：采取遍历每一个新虚拟DOM的节点，与旧虚拟DOM对比相应节点对比，在旧DOM中是否存在，不同就卸载原来的按上新的规则采取以上三种方法。这样会对每一个节点进行操作。但这样效率太低。于是就可以添加一个ｋｅｙ值，这样可以通过ｋｅｙ值直接找到相应的节点进行对比，再采取相应的手段。就不必深度遍历每一个节点。大大的节约了性能。

 

　　最后就是把虚拟DOM映射成真实的DOM。这样每次更新数据，可以减少页面的回流和重绘。