谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值
一、DocumentFragment
在了解虚拟DOM前，先来了解DOM的一个对象属性——DocumentFragment。
在一次操作中，需要频繁操作DOM时，就可以先将要改变的节点附在DocumentFragment上，之后再将该对象渲染到DOM中，改方法只对DOM进行了一次操作，可以显著提高性能。
但是该方法只适用于局部操作，而在真实的项目中，需要的不仅仅是DocumentFragment，于是就有了虚拟DOM的产生
紧接着，对于这么一个东西，我们先来基本的三连问。是什么？为什么？怎么用？
二、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值，可以更高效更迅速。
