详谈面试题：Vue、React为什么使用虚拟DOM
虚拟DOM是一种在前端框架中广泛使用的技术，它可以提升开发效率。那么国外流行的框架svelte没有使用虚拟DOM，而是直接操作真实DOM，效率依然很高。为什么Vue和React不采用这种方式呢？
目录
一、框架设计
二、解耦运行环境
三、总结
一、框架设计
Vue和React的框架设计无法做到这点，因为框架的颗粒度没有那么细，它们的最小颗粒度是精确到组件的，也就是说，在Vue和React的框架中，数据变化了，操作的不是真实DOM，而是组件。
组件中是由render函数来渲染组件的，假如组件中有很多真实DOM，如果数据变化，会导致render函数重新运行，在react里面就是函数式组件重新运行，数据变化后在render函数重新生成真实DOM的代价太大了，因为可能操作到的数据，只关联一个真实的DOM，而重新运行把很多不需要的的DOM生成出来了。效率就会非常低。因此选择生成虚拟DOM（JS对象），通过对比，精准定位到真实DOM哪里需要更新。
而Svelte不需要考虑这样的问题。
Svelte框架选择不使用虚拟DOM而是直接操作真实DOM，并且依然保持高效率的原因主要有以下几点：
-
编译时优化：Svelte通过其强大的编译器在构建时将模板和响应式逻辑转换成高效的JavaScript代码。这意味着所有对DOM的操作都在编译时被优化，而不是在运行时。
-
声明式编程：Svelte允许开发者以声明式的方式编写代码，框架自动处理DOM更新。开发者只需关注状态变化，而框架负责将这些变化映射到DOM上，减少了手动操作DOM的复杂性。
-
避免不必要的DOM操作：Svelte的编译器能够精确地识别出哪些DOM操作是必要的，从而避免不必要的DOM操作和渲染，这减少了运行时的性能开销。
-
响应式声明：在Svelte中，开发者只需声明响应式变量，框架会自动处理依赖跟踪和更新DOM，这种机制减少了手动操作DOM的需要，并且提高了效率。
二、解耦运行环境
Vue和React的框架在设计时，是希望代码可移植到其他环境，如小程序，移动端等等，而不仅仅是浏览器环境。所以不能绑定真实DOM，因为真实DOM只有浏览器环境中有。
为了解耦环境，将真实DOM提取成JS对象的形式来描述界面，JS对象是ES的范畴，只要环境支持ES，就一定支持ES对象。这样不同环境都可以使用同一套对象描述界面，用虚拟DOM进行不同的渲染。支持多端开发。
三、总结
-
性能优化：虚拟DOM通过减少对真实DOM的操作次数来提高性能。由于DOM操作是昂贵的，直接操作DOM会导致性能问题，尤其是在数据频繁更新时。虚拟DOM允许框架通过比较前后两个虚拟DOM树的差异，找出最小更新范围，然后只更新那些实际变化的部分，从而减少不必要的DOM操作。
-
跨平台渲染：虚拟DOM提供了跨平台渲染的能力，使得Vue和React的应用不仅限于浏览器环境。例如，React Native利用虚拟DOM在移动设备上渲染应用界面，而Vue也可以通过Weex等技术实现跨平台渲染。
-
批量更新和优化：虚拟DOM允许批量更新，将多个数据变更合并为一次操作，减少DOM操作次数，提高性能。这种批量更新机制可以减少页面的重绘和回流，提升渲染效率。
-
开发体验：虚拟DOM提供了声明式的编程模式，开发者可以更专注于数据和状态，而不必过多关心底层的DOM操作。这种模式简化了开发流程，提高了开发效率。
-
组件粒度的更新：在Vue和React中，数据变化时，操作的不是单个真实DOM，而是组件。组件的更新是由render函数来渲染的，如果组件中包含很多真实DOM，数据变化会导致render函数重新运行，这可能导致不必要的DOM生成，影响效率。虚拟DOM通过对比，精准定位到真实DOM哪里需要更新，避免了这种低效的操作。
-
避免回流和重绘：虚拟DOM不会进行回流和重绘；真实DOM在频繁操作时引发的回流重绘导致性能降低。虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部。