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

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

1、DocumentFragment

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

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

可是该方法只适用于局部操做，而在真实的项目中，须要的不单单是DocumentFragment，因而就有了虚拟DOM的产生

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

2、VDOM

什么是虚拟DOM?

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

为何要用虚拟DOM?

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

虚拟DOM的实现步骤？

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

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

• 三、经过Diff算法对比修改的部分，然后将修改部分渲染到真实的DOM中

• 四、释放内存

真实DOM与虚拟DOM示意图

真实DOM

虚拟DOM则相似与以下图

3、Key值的用处

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

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

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

• 所以，key值通常来讲，最好是独一无二的。

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