持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 15 天，点击查看活动详情

12. 虚拟 DOM

start

• 在 Vue@2 源码的 /src/core 文件夹下，可以看到和observer文件夹同层级还有一个文件夹 vDOM；

• vDOM 其实可以看做是 virtual DOM 的简写形式，就是我们今天要说的主题，虚拟 DOM。

  virtual (英文释义) 虚拟的

虚拟 DOM 是什么

虚拟 DOM，第一次听到这个名词的时候，我很些疑惑，虚拟 DOM 是什么？

解释

DOM 是什么：DOM （Document Object Model）文档对象模型，以节点树的形式来表现文档。

真实的DOM对象是这样的：

<div class="test">
  <p>你好</p>
  <p>欢迎光临</p>
</div>

虚拟 DOM 不是真正意义上的 DOM。而是一个 javascript 对象。

可以把虚拟 DOM 这个词语拆分开理解，一个是虚拟，一个是 DOM。

1. 虚拟：表示不是真实的 DOM 对象，而是一个普通的 js 对象
2. DOM：表示 虚拟 DOM 可以类似节点树的形式表示文档

虚拟 DOM 中大概是这样：

{
    tag: 'div',
    attributes:{
        class: ['test']
    },
    children:[
        // p 元素
        // p 元素
    ]
}

为什么要引入虚拟 DOM 这个概念

还记得学习 JQ 的时候，当我们数据发生改变，我们需要手动操作 DOM。

JQ相关逻辑

• 状态 -> 真实 DOM
• 每次更新状态，都重新更新整个视图

在 Vue@2 中是声明式操作 DOM，通过描述数据和 DOM 之间的映射关系，就可以将数据渲染为视图，状态到视图，框架会帮我们处理。

所以当我状态发生改变，只更新与状态相关的 DOM 节点。

虚拟 DOM 只是实现这个想法的其中一种方法而已。

虚拟DOM相关逻辑

• 状态 -> 生成新虚拟 DOM ->新的虚拟 DOM 和旧的虚拟 DOM 对比 -> 真实 DOM

虚拟DOM的优点

• 具备跨平台的优势–由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
• 操作 DOM 慢，js 运行效率高。我们可以将 DOM 对比操作放在 JS 层，提高效率。运用 patching 算法来计算出真正需要更新的节点，最大限度地减少 DOM 操作，从而显著提高性能。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
• 提升渲染性能 Virtual DOM 的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新
• 虚拟 DOM 就是为了解决浏览器性能问题而被设计出来的

end

• 虚拟 DOM 其实就是用一个原生的 JS 对象去描述 DOM 节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作，借助虚拟DOM 去渲染真实的DOM。

• 相当于在 js 与 DOM 之间做了一个缓存，利用 patch（diff 算法）对比新旧虚拟 DOM 记录到一个对象中按需更新， 最后创建真实的 DOM。