虚拟 DOM 原理和 Vue 的三个核心模块

2021-08-24 本文已影响0人 AizawaSayo

一、什么是 DOM (document object model)

DOM 即文档对象模型的缩写，

我们把这个 HTML 加载到浏览器中，浏览器创建这些节点，用来显示网页。这个 HTML 会映射到一系列 DOM 节点，我们可以使用 JavaScript 和它们进行交互操作，就像这样：

let item = document.getElementByTagName('h1')[0]
item.textContent = "New Heading"

检索 h1 元素，并且把它的文本内容修改成新的标题，更新 DOM 节点，然后更新浏览器。

二、Virtual DOM - 虚拟DOM

然而网页可以有很多 DOM 节点，这意味着 DOM 树可以有数千个节点。这就是为什么我们有像 Vue 这样的框架，帮我们干这些费劲活，并进行大量的 JavaScript 调用。

然而，搜索和更新数千个 DOM 节点很明显会很慢。这就是 Vue 和其他类似框架有一种叫做虚拟 DOM 的东西。虚拟 DOM 是用 JavaScript 表示 DOM 的一种方式。
例如，这个 HTML 也可以通过一个虚拟节点来表示

<div> Hello </div>

看起来像这样：

{
  tag: 'div',
  children: [
    {
      text: 'Hello'
    }
  ]
}

如你所见，它只是一个JavaScript对象。

Vue 知道如何使用此虚拟节点并挂载到 DOM 上，它会更新我们在浏览器中看到的内容。实际上还有一个步骤，其中，Vue 基于我们的模板创建一个渲染函数，返回一个虚拟 DOM 节点。

渲染函数可以是这样的：

render(h) {
  return h('div', 'hello')
}

当组件更改时，Render 函数将重新运行，它将创建另一个虚拟节点。然后发送旧的 VNode 和新的 VNode 到 Vue中进行比较，并以最高效的方式在我们的网页上更新。

我们可以将虚拟 DOM 和真实 DOM 的关系类比为蓝图和实际建筑的关系。假设我更改了 29 楼的一些数据。我改变了家具的布局还加了一些橱柜。我有两种方法可以改变。首先，我可以拆除 29 楼的一切从头开始重建。或者我可以创造新的蓝图，比较新旧蓝图并进行更新以尽可能减少工作量。这就是虚拟 DOM 的工作原理。Vue 3 让这些更新更快并且更高效。