虚拟 DOM

一、 什么是虚拟 DOM？

所谓虚拟 DOM，就是用一个 JS 对象来描述一个 DOM 节点，像如下示例：

<div class="a" id="b">我是内容</div>

{
  tag:'div',        // 元素标签
  attrs:{           // 属性
    class:'a',
    id:'b'
  },
  text:'我是内容',  // 文本内容
  children:[]       // 子元素
}

二、 为什么要有虚拟 DOM？

Vue 是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作 DOM,而操作真实 DOM 又是非常耗费性能的，这是因为浏览器的标准就把 DOM 设计的非常复杂，所以一个真正的 DOM 元素是非常庞大的

一个简单的空 div 标签，就打印出这么多东西，更不用说复杂的、深嵌套的 DOM 节点了。由此可见，直接操作真实 DOM 是非常消耗性能的。

我们可以用 JS 的计算性能来换取操作 DOM 所消耗的性能。

既然我们逃不掉操作 DOM 这道坎,但是我们可以尽可能少的操作 DOM。那如何在更新视图的时候尽可能少的操作 DOM 呢？最直观的思路就是我们不要盲目的去更新视图，而是通过对比数据变化前后的状态，计算出视图中哪些地方需要更新，只更新需要更新的地方，而不需要更新的地方则不需关心，这样我们就可以尽可能少的操作 DOM 了。这也就是上面所说的用 JS 的计算性能来换取操作 DOM 的性能。

我们可以用 JS 模拟出一个 DOM 节点，称之为虚拟 DOM 节点。当数据发生变化时，我们对比变化前后的虚拟 DOM 节点，通过 DOM-Diff 算法计算出需要更新的地方，然后去更新需要更新的视图。

这就是虚拟 DOM 产生的原因以及最大的用途。