什么是虚拟 DOM？
一个普通 JavaScript 对象。就是这么简单粗暴
传统 DOM 操作的问题
- 数据驱动的界面更新
在数据驱动的框架中，比如 Vue 和 React，界面会根据数据的变化而自动更新。问题在于，当数据发生变化时，如何高效地更新界面呢？一个组件可能涉及到多个元素，而数据的变化只影响其中的一部分元素。传统的做法是重新渲染整个组件，然后用新渲染的结果替换旧的 DOM，这样做会导致性能问题。
- 重新渲染的开销
由于无法准确知道哪些元素发生了变化，框架必须重新渲染整个组件的 DOM。这样做非常低效，因为可能有很多不需要更新的元素也被重新渲染了。如果直接操作真实的 DOM，会极大拖慢应用的速度，特别是当页面很复杂时。
虚拟 DOM 的解决方案
虚拟 DOM 通过在内存中创建一个虚拟的 DOM 树，避免了频繁操作真实 DOM 的开销。框架会先在虚拟 DOM 中进行所有的变化，然后将虚拟 DOM 与之前的虚拟 DOM 进行比较，这个过程称为“diff”或“patch”。通过对比，可以找出实际发生变化的部分，然后只更新这些部分的真实 DOM，从而提升性能。
而 Svelte 却不使用虚拟 DOM。它的工作原理是在编译阶段将组件编译成高效的 JavaScript 代码，这些代码直接操作真实的 DOM。这样，Svelte 避免了虚拟 DOM 的开销，能直接、迅速地更新界面。
跨平台的虚拟 DOM
虚拟 DOM 还有一个重要的作用就是跨平台支持。虚拟 DOM 可以用在浏览器、小程序、移动端甚至桌面应用中。它提供了一个抽象层，使得相同的代码能够在不同的环境中运行。在这些环境中，虚拟 DOM 可以被转化为适合具体平台的渲染代码。