为什么要引入虚拟 DOM

• 为什么要引入虚拟 DOM
  • 什么是虚拟 DOM
  • 为什么要使用虚拟 DOM
    • 框架的设计
    • 跨平台 (运行时解耦)

什么是虚拟 DOM

虚拟DOM（Virtual DOM）实际只是一层对真实DOM的抽象描述，以JavaScript 对象作为基础的树，用对象的属性来描述节点，最终可通过通过处理机使这棵树映射到真实环境上

为什么要使用虚拟 DOM

在现在主流的 web 框架，如 Vue 和 React 都使用了虚拟 DOM。

关于为什么要使用虚拟 DOM ?

主要是有两个方面：

框架的设计

在 vue 和 react 中的设计模式都是 数据驱动, 但是不论在 react 还是 Vue 中，颗粒度最小的单位是组件，即无法将数据关联到具体的 dom 元素。

在数据变化后，整个组件或者页面会刷, 在页面或者组件中会存在很不相关的元素，即不需要变化的 dom,这个时候如果直接刷新整个组件或者页面会造成大量的不必要的计算

这个时候引入虚拟 DOM 的概念, 在组件中不去生成真实 dom,而是使用 js 对象去描述 UI，生成一颗虚拟 dom 树，然后再将虚拟 dom 树渲染成真实 dom 树。

这个时候数据变化，组件生成一棵新的虚拟 dom 树，通过一系列算法，找到变化的点，去定位到真实的 dom，进行 dom 更新。这样避免了大量的不必要 dom 操作，优化了效率。

虚拟 dom 不是避免了操作 dom，而是避免了大量的不要 dom 操作，通过虚拟 dom，将数据的颗粒度于真实 dom 对齐。

跨平台 (运行时解耦)

虚拟 dom 是对 UI 的描述，抽象了原本的渲染过程，实现了跨平台的能力，使得不仅仅局限于 web 端开发。