虚拟 DOM 更新其实效率并不像大家想象中的那么高,而且 React 官方也从来没说过虚拟 DOM 效率有多高,相反React 虚拟 DOM 的实现也不是所有虚拟 DOM 产品中最好的。

但是通过虚拟DOM的抽象能力,我们拥有了声明式写UI的能力,大大提高了我们的[工作效率」,具体是为什么这要讲到VDOM和真实DOM的相似度来说了。

打开网易新闻 查看更多图片

一、VDOM和真实DOM的相似度

HTML tag 书写方式和 json 的书写方式是差不多的:他们都是树形结构。

DOM是一个树形结构,这个树形结构对应的就是我们的HTML tag,书写HTML其实并不是很费脑,因为一切都抽象成了一个人能够看懂的Tag,层级之间的关系就好像画图一样。如果我们使用javascript api 去书写 HTML tag 是非常痛苦的,所以开发人员就瞄上了和HTML tag 有相似结构的json数据格式。因为json又是javascript的原生对象,所以就让[在javascript中声明式书写html 带来了可能]

但是能够书写html远远已经不能满足我们现代工业的需求,我们需要一种机制:

1、能够声明式地书写html

2、能够在javascript 中书写 html

3、能够小粒度地复用我们的这些"html"

那么,通过babel转化的jsx就应运而生了,让人们拥有了使用js写html并且声明式又可以控制粒度的复用

二、Vue采用虚拟DOM的目的

上面那堆话说的是虚拟DOM的作用,那么Vue引入虚拟DOM的目的就很容易理解了:

1. Vue 2.0引入 vdom 的主要原因是 vdom 把渲染过程抽象化了,从而使得组件的抽象能力也得到提升,并且可以适配DOM以外的渲染目标。

2.不再依赖HTML解析器进行模版解析,可以进行更多的AOT工作提高运行时效率:通过模版AOT编译,Vue的运行时体积可以进一步压缩,运行时效率可以进一步提升;

3.可以渲染到DOM以外的平台,实现SSR、同构温染这些高级特性,Weex等框架应用的就是这一特性。

打开网易新闻 查看更多图片

三、对虚拟DOM的理解

很多人喜欢把数据的更新和虚拟 DOM 进行强行绑定,实际上数据是否更新更快 虚拟 DOM 关系真的不大。

虚拟DOM只有在HTML tag(或者是VDOM的node type)剧烈变化的时候才会体现他的好处:局部替换HTML tag(替换vnode)。任你数据再怎么变都好,其实DOM本身根本不懂你数据是否变化。因此,明白这些以后,应该就能明白,虚拟DOM引入最大的好处就是:

1.组件的高度抽象化

2.可以更好的实现SSR,同构渲染等

3.框架跨平台TG:li9047