一、什么是 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 让这些更新更快并且更高效。
三、Vue 的三个核心模块
Reactivity Module - 响应式模块
响应式模块允许我们创建 JavaScript 响应对象并可以观察其变化。当使用这些对象的代码运行时，它们会被跟踪。因此，它们可以在响应对象发生变化后运行。
Complier Module - 编译器模块
编译器模块获取 HTML 模板并将它们编译成渲染函数。这一行为可能在运行时发生在浏览器中，但(发生)在构建 Vue 项目时更常见。这样浏览器就可以只接收渲染函数。
Renderer Module - 渲染模块
渲染模块的代码包含在网页上渲染组件的三个不同阶段：
- Render Phase - 渲染阶段：调用 render 函数，返回一个虚拟 DOM 节点。
- Mount Phase - 挂载阶段：使用虚拟 DOM 节点并调用 DOM API 来创建网页。
- Patch Phase - 补丁阶段：渲染器将旧的虚拟节点和新的虚拟节点进行比较，并只更新网页变化的部分。
现在让我们来看一个例子，一个简单组件的执行。它有一个模板，以及在模板内部使用的响应对象。首先，模板编译器将 HTML 转换为一个渲染函数。
然后初始化响应对象，使用响应式模块。
接下来，在渲染模块中，进入渲染阶段。这将调用 render 函数，它引用了响应对象。我们现在监听这个响应对象的变化，render 函数返回一个虚拟 DOM 节点。
然后，在挂载阶段，调用 mount 函数使用虚拟 DOM 节点创建 web 页面。
最后，如果我们正在监视的响应对象发生任何变化，渲染器会再次调用 render 函数，创建一个新的虚拟DOM节点。新的和旧的虚拟DOM节点，发送到 Patch 函数中，然后根据需要更新我们的网页。
网友评论