这节课我们来了解 Vue.js 是如何利用虚拟 DOM 使网页更加健壮、具有高性能和易于管理的。

与其他前端框架类似，Vue.js 实现了虚拟 DOM（Virtual DOM）。乍一听可能令人生畏，但它的主要目的是提高文档对象模型 (DOM)更新的性能和效率。除此之外，虚拟 DOM 还提供了一些附加功能。

什么是 DOM？

当 Web 浏览器解析 HTML 页面时，它会创建一个表示 HTML 页面的树状数据结构。网页由具有子元素等的元素组成。将 DOM 视为将显示的网页存储在计算机内存中的数据结构。

浏览器读取 DOM 并相应地显示网页。要在网页中更改 DOM，浏览器将重新渲染网页。

浏览器提供了操作 DOM 的 API，例如document.createElement。

更新 DOM 的成本

如上所述，JavaScript 更新 DOM，然后由浏览器进行实际处理。在我们看不到的幕后，浏览器需要找到相关的 DOM 节点并进行所需的更改。

document.getElementById('the_id').appendChild(aNewNode);

在大多数现代应用程序中，DOM 可以包含数千个节点。因此，找到所需的节点可能是一项计算成本很高的任务！如果网页经常更新，即使变化很小，网页也会变慢。因此，搜索和更新 DOM 是 Web 应用程序性能的一个巨大瓶颈。

虚拟 DOM

我们可以将真实 DOM 表示为 JavaScript 对象，也就是所谓的虚拟DOM。请参阅以下表示为 JavaScript 对象的 Node 示例：

let DOM_node = {
  tag: 'ul',
  attributes: { id: 'the_Id' },
  children: []
};

如果整个 DOM 像上面示例那样表示，它就可以被称为虚拟 DOM。

更新虚拟 DOM

在更新 DOM 时，将 DOM 表示为 JavaScript 对象的优势变得明显。现在，浏览器没有直接改变 DOM 树，而是由 Vue.js 来改变 JavaScript 对象（虚拟 DOM），这样性能是非常高的。

DOM_node.children.push('<ul>List Item</ul>');

真实的 DOM 将如何改变？

Vue.js 负责处理真实 DOM 与虚拟 DOM 的同步。它通过使用高度优化的sync函数来做到这一点。

sync(actual_DOM_node, DOM_node);

该sync函数将调用 DOM API 并批量或按比任意更新 DOM 或按照更好的顺序更新 DOM。

当虚拟 DOM 中的节点更新时，Vue 会将旧版本的 DOM 与新版本进行比较，并决定是否需要更改实际 DOM。这个过程称为 diff。如果需要更改，则只会更改关联的 DOM 节点，而 DOM 树的其余部分保持原样。

总结

虚拟 DOM 是 Vue.js 性能和效率的核心技术。与在真实 DOM 中搜索节点相比，在虚拟 DOM 中查找已更新节点的过程要快得多。通过这种方式，Vue.js 绕过了在大型 Web 应用程序中搜索和更新多个节点的性能开销。