真正理解为什么要虚拟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出现的真实原因。