虚拟 DOM 是什么，库或者框架中为什么要使用他？

2019-02-24

回答

虚拟 DOM（VDOM）是使用 JavaScript 普通对象来描述真实 DOM 的展现方式。这些对象具有描述真实 DOM 节点的属性，比如：节点名称，他的属性和子节点。

<div class="counter">
  <h1>0</h1>
  <button>-</button>
  <button>+</button>
</div>

上面的 DOM 元素使用虚拟 DOM 可以如下进行表示：

{
  nodeName: "div",
  attributes: { class: "counter" },
  children: [
    {
      nodeName: "h1",
      attributes: {},
      children: [0]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["-"]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["+"]
    }
  ]
}

库或者框架中使用虚拟 DOM 主要为了提高性能。当应用程序的状态发生变化时，真实 DOM 需要进行及时更新以表示出其变化。然而，修改真实 DOM 节点与重新计算虚拟 DOM 相比需要更高的成本。前一个虚拟 DOM 和新的虚拟 DOM 进行对比可以非常的快。

旧的虚拟 DOM 和新的虚拟 DOM 之间一旦有变化，就可以通过框架中的比对引擎计算出来。真实的 DOM 就可以在最短的事件内快速的进行差异更新以匹配应用程序中最新的状态。

加分回答

使用虚拟 DOM 可以减少对底层的 DOM 操作，这样采用声明式编程可以编程过程更加简洁直观。
虚拟 DOM 可以将同一时间内多个状态的变化累计计算出最终状态，以便对 DOM 只执行一次更新。
下图可以说明更新 DOM 的代价

返回总目录

每天 30 秒

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！