javascript|Vue采用虚拟DOM的目的是什么?

文章图片

虚拟 DOM 更新其实效率并不像大家想象中的那么高，而且 React 官方也从来没说过虚拟 DOM 效率有多高，相反React 虚拟 DOM 的实现也不是所有虚拟 DOM 产品中最好的。
但是通过虚拟DOM的抽象能力，我们拥有了声明式写UI的能力，大大提高了我们的[工作效率」，具体是为什么这要讲到VDOM和真实DOM的相似度来说了。

【javascript|Vue采用虚拟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