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

2,967 阅读2分钟

谈谈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值,可以更高效更迅速。