#为什么需要Virtual DOM?

更新页面，本质上都是操作真实DOM

那么，为什么需要Virtual DOM呢？使用Virtual DOM岂不是又多了一层操作？

两个方面来说：

#框架设计，数据驱动视图

Virtual DOM是框架设计的一种方式，通过Virtual DOM，框架可以更好的管理视图，提高性能，减少不必要的DOM操作。

数据变化 直接定位到需要更新的节点，减少不必要的DOM操作（效率最高的办法）

比如说用原生JS操作DOM，直接定位到需要更新的节点，然后更新节点内容，这样效率最高。

Vue 和 React 框架的颗粒度没有那么细，最小更新单位是组件，数据变化了它动的是组件。

相当于重新运行一遍组件的render函数，那万一组件的render函数返回很多个真实DOM节点呢？

render() {
  // 多个真实DOM节点
}

如果直接全量生成多个真实DOM节点，那么就会有很多不必要的DOM操作，这样效率就会很低，可能我们的数据只涉及里面的一个节点，但是我们却重新生成了所有的节点。

那么现在 Virtual DOM 就派上用场了，我们可以用 Virtual DOM 来描述真实DOM，然后通过比较新旧 Virtual DOM，找出需要更新的节点，然后更新这些节点。

#跨平台（解耦运行环境）

本质上：Virtual DOM 是一个JS对象，描述了真实DOM的结构，这个JS对象是跨平台的，不依赖于具体的渲染引擎，只要有ES运行环境，就可以运行。

Virtual DOM 可以跨平台，比如说 React Native，它可以用 Virtual DOM 来描述移动端的UI，然后通过 React Native 的渲染引擎，把 Virtual DOM 转换成移动端的原生UI。

这样就实现了一套代码，多端运行，这样就解耦了运行环境，只需要关心 Virtual DOM 的描述，不需要关心具体的渲染引擎。