为什么需要虚拟DOM ​

基于两个主要的原因：

1. 框架设计

无论是 Vue 还是 React，都是基于数据驱动的，数据发生了改变，视图显示就随之改变。在一个组件中可能存在很多的dom元素，假设在没有虚拟dom的情况下，data中的数据name发生了改变，因为不知道name与哪个dom元素有关联，可以通过暴力手段例如render将整个组件进行更新。

但是通过这种手段将所有的dom都进行了操作，是非常消耗性能的。

妥协下，可以通过生成虚拟dom的方式来优化对dom的操作。当数据发生了改变时，生成一个新的虚拟dom对象，通过对比新旧的虚拟dom，就可以知道是哪个位置哪个dom元素发生了改变，从而去更新对应的dom元素，避免全量更新的这种极端手段。从而减少对dom的直接操作，提升性能。

2. 跨平台

Vue 和 React 这些框架，不仅仅能够在浏览器下使用，还能够在小程序、移动端或者桌面端进行使用。比较抽象，不能绑定具体的页面。浏览器环境下才会有真实的DOM，脱离了这个环境时，就不一定了。

而虚拟dom实际是JS的普通对象，根据不同的环境，使用虚拟dom来渲染出对应的界面，就能够实现一套代码在多端运行。