虚拟DOM¶

一，虚拟DOM是什么？¶

虚拟DOM是一个用JavaScript对象（通常是轻量级的树结构）来表示真实DOM结构的抽象表示。它不是真实的DOM节点，而是对真实DOM的抽象描述。这些JavaScript对象代表了真实DOM的节点和属性，并允许开发者在内存中以一种高效的方式去操作DOM，而无需直接操作真实的DOM树。(无论所有的操作最终都是会操作真实DOM，那为什么还要多此一举先去操作虚拟DOM呢？)

二，vue和react框架为什么需要虚拟DOM？¶

关于为什么会需要虚拟DOM，第一个想到的可能就是会提高效率，虚拟DOM的所有流程大概为以下四步：

初始渲染：将当前页面的DOM树映射为一个JavaScript对象形式的虚拟DOM。
状态更新：当应用程序更新，状态发生变化时，会根据最新的状态生成一个新的虚拟DOM。
比较差异：最新生成的虚拟DOM树与原虚拟DOM树进行比较，找到有差异的部分，其实就是一个确定最小更新范围的过程。
更新DOM：根据差异列表，对需要修改的真实DOM元素进行操作，使浏览器重新进行渲染。

然后是下一个问题，react和vue框架为什么需要虚拟DOM？

其实主要是因为这两种框架的颗粒度是到组件级别的，而不是到具体的DOM元素

所以一个组件下是可能有多个DOM的，比如有成百个DOM，如果其中一个DOM变化的话，会导致整个组件下的所有DOM进行更新，严重影响效率。

三，也有直接操作真实DOM的框架-svelte，为什么这个直接操作真实DOM的框架的效率很高？¶

主要原因是因为svelte框架在设计时，可以支持的操作颗粒度是到DOM这一层级的，所以当页面发生变化，需要重新渲染时，只需找到需要更新的DOM，直接对真实DOM进行操作即可。