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

一、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值，可以更高效更迅速。

posted @ 2020-03-26 14:00  jack杰克  阅读(558)  评论(0)    收藏  举报