谈谈Vue/React中的虚拟DOM(VDOM)与Key值

一、DocumentFragment

在了解虚拟DOM前，先来了解DOM的一个对象属性——DocumentFragment。

在一次操作中，需要频繁操作DOM时，就可以先将要改变的节点附在DocumentFragment上，之后再将该对象渲染到DOM中，改方法只对DOM进行了一次操作，可以显著提高性能。

但是该方法只适用于局部操作，而在真实的项目中，需要的不仅仅是DocumentFragment，于是就有了虚拟DOM的产生

紧接着，对于这么一个东西，我们先来基本的三连问。是什么？为什么？怎么用？

注意，实际的Vue和React的VDOM实现稍有不同

二、VDOM

什么是虚拟DOM?

虚拟DOM的本质是一个和真实DOM结构类似的JS对象

为什么要用虚拟DOM?

虚拟DOM可以提高浏览器的渲染速度。对比操作JS对象，操作真实的DOM消耗的性能较多，频繁的操作DOM时，优势彰显的更为明显。

虚拟DOM的实现步骤？

• 1、在页面首次渲染时，将要渲染的数据全部加载到虚拟DOM中，而后在一次性渲染到真实DOM上

• 2、在数据变化时，额外的生成一颗虚拟DOM树

• 3、通过Diff算法对比修改的部分，而后将修改部分渲染到真实的DOM中

• 4、释放内存

真实DOM与虚拟DOM示意图

真实DOM

虚拟DOM则类似与如下图

三、Key值的用处

在一个Vue项目或者React项目中，写循环时，往往会加上key值。那么这个key值到底有多大的用处呢？

• 首先，在Vue中，存在一个DOM复用机制，会尽量的回收DOM元素进行复用，而这个机制本身是高效的，但很多时候也会造成不可预知的Bug，而在加了key值后，元素就有了一个标识，复用机制不会复用带key值的元素。而React也存在类似的机制。

• 反之，若使用相同的key值，可以使组件复用，也有可能导致渲染内容缺失。

• 因此，key值一般来说，最好是独一无二的。

• 除此之外，虚拟DOM在使用Diff算法进行对比时，若存在key值，可以更高效更迅速。