真正理解为什么要虚拟DOM

1、什么是虚拟DOM?

本质上就是一个js对象,用于描述视图的页面结构
在vue中,每一个组件都有一个render函数,每个render函数都会返回一个虚拟DOM树,即每个组件都对应一棵虚拟DOM树。

2、为何使用虚拟DOM

在vue中,渲染视图会调用render函数,这种渲染发生在组件创建和视图依赖数据更新时。如果在渲染的时候之间使用真实DOM,则会带来大量性能消耗,从而降低渲染效率,因此,vue在渲染时,使用虚拟DOM代替真实的DOM,主要解决渲染效率的问题。

实际上没这么简单!!!

Svelte这个框架就没有虚拟DOM,是直接操作真实DOM。为什么他的效率更高?
而且去vue、react的官网看,没有任何一句话说虚拟DOM是为了提升效率。
所以只理解为是为了提升效率,无法触达虚拟DOM的本质。

那到底是干嘛的?有2个层面
1、框架设计
像vue、react这种框架在设计的时候,就避免不了使用虚拟DOM,或者说,使用虚拟DOM是比较简单的选择。
vue、react在渲染页面的时候会运行一个render函数,页面是通过运行render函数产生的,运行的时候涉及到一个问题,vue、react是组件化开发,而一个组件是有很多元素。

举个例子:一个组件里面有100个元素,这个时候,某一个数据属性发生变化,就得重新运行render函数。理想状态下是这个属性关联到的DOM元素就重新生成或者修改这个DOM元素,数据和某个DOM元素对应起来,这样的效率是最高的。
但是这样在vue、react中很难实现,很难知道这个数据关联到了哪些DOM元素,只知道数据是关联到一个组件,数据变化,组件的render函数就重新运行。由于这一点很难实现,所以在render函数里面,没有办法,只能做全量渲染,就是说哪怕这个数据只关联到了一个DOM元素,也会更新整个组件。而react更夸张,甚至会把整个组件树从根组件开始全部重新渲染一遍。所以在这样一个前提条件下,去操作真实DOM,效率就很差。
这是一个框架设计的问题,Svelte框架就没有这样的问题。所以在这样的框架设计下,因为会全量渲染,使用真实DOM代价过高,就选择了一个折中的办法,使用虚拟DOM。一个无奈的折中的选择。
2、跨平台
真实DOM是绑定到浏览器环境里面的,只有浏览器环境才有真实DOM,像原生环境比如移动端的原生组件,桌面端的原生组件,这种原生环境就不存在真实DOM,连DOM的概念都没有。所以vue、react框架如果把数据和真实DOM关联的话,就会有一个跨平台的问题。像vue、react是可以一套代码运行在不同的环境里面。之所以可以移植到各平台,就是因为虚拟DOM,换一个平台依旧可以使用虚拟DOM与真实的原生组件对应,轻松实现跨平台。

所以基于这两个前提才是虚拟DOM出现的真实原因。

你可能感兴趣的:(React,前端,javascript,vue.js,react.js)