携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>
好记性不如烂笔头，只有记下来，反复检查才能记住鸭！

1.什么是DOM或文档对象模型?

这是我们浏览器界面要改变的屏幕上显示的内容

    <html>
        <head>
            <title>My title</title>
        </head>
        <body>
            <h1>A heading</h1>
        </body>
    </html>

我们浏览器创建这些节点，来显示我们的网页

graph TD
docment --> html --> head --> title --> MyTitle
html --> body --> h1 --> AHeading

所以这个DOM映射到的一系列Html节点我们可以使用JavaScript进行操作为了操作DOM我们可以编写JS像这样一样来检查这些元素

    let item = docment.getElementsByTagName("h1")[0];
    item.textContent = "New Heading";

我们可以把他的文本内容改为新的标题，然后更新节点，然后更新浏览器网页可能有很多个节点这就意味着DOM树可能有数千个节点，这就是为什么我们有像Vue这样的框架，帮我们干这些重活，并且进行大量的JavaScript调用。然而，搜索和更新数千个DOM节点，很明显会变慢，这就是Vue和其他类似框架有一种叫做虚拟DOM的东西。

2.虚拟DOM

虚拟DOM是表示DOM的一种方式，使用JS对象比如这个Html也可以通过一个虚拟节点来表示，像这样一样

    <div>Hello</div>

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

如您所见，他只是一个JS对象，Vue知道如何使用这个对象并挂载到DOM上，他会更新我们再浏览器中看到的内容。其中，Vue基于我们的模板创建一个渲染函数，返回一个虚拟DOM，渲染函数可以是这样的。

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

当组件更改时Runder函数将重新运行，他将创建另一个虚拟节点

    {
        tag:"div",
        children:[
            {
                text:"Goodbye"
            }
        ]
    }

然后发送旧的DOM和新的DOM到Vue中比较，并以高效的方式在我们的网页上更新。 我们可以将虚拟DOM和实际DOM类比为蓝图和实际建筑的关系，假设我更新了29楼的一些数据。我改变了家居的布局，还加了一些橱柜。我有两种方法可以改变，首先我可以拆除29楼的一切从头开始重建。或者我可以创建旧的蓝图，比较新旧蓝图，并进行更新，以减少工作量，这就是虚拟DOM的工作原理。

3.Vue的三个核心模块

响应式模块

我们的响应式模块，允许我们创建JS响应式对象，并可以观察其变化，当使用这些对象的代码运行时，他们就会被追踪，因此，如果响应式对象发生变化，他们可以在以后运行。

编译器模块

他知道如何获取HTML模板，并将它编译成渲染函数，这可能在运行时在浏览器中发生，但在构建Vue项目时更常见。这样浏览器可以只接收渲染函数。

渲染模块

渲染模块的组件包含在网页上渲染组件的三个阶段，三个不同的阶段。

渲染阶段

在渲染阶段将调用Runder函数，他返回一个虚拟的DOM节点。

挂载阶段

使用虚拟DOM节点，并调用DOM API来创建网页。

补丁阶段

最后在补丁阶段，渲染器将旧的虚拟节点和新的虚拟节点，进行比较并只更新页面变化的部分

这就是Vue三个核心模块。让我们来看一个例子，看看一个简单组件的执行

graph TD
1.组件 --> 2.模板 --> 3.响应式对象
4.编译器 --> 1.组件 --> 5.渲染函数 --> 6.初始化响应式对象 --> 3.响应式对象
7.渲染阶段 --> 5.渲染函数 --> 8.虚拟DOM节点 --> 9.调用Mount函数进行挂载 --> 10.显示在浏览器
11.如果响应式对象发生变化 --> 5.渲染函数 --> 12.New虚拟DOM --> 13.对比旧虚拟DOM --> 9.调用Mount函数进行挂载

原文

我们拥有一个组件
组件有一个模板
以及模板内部的响应式对象
首先编译器将HTML转换为一个渲染函数
然后初始化响应式对象，使用响应式模块
在渲染阶段调用渲染(Runder)函数他引用了响应式对象，我们会持续监听响应式对象的变化
渲染(Runder)函数返回一个虚拟DOM节点
接下来在挂载阶段，调用Mount函数
使用虚拟DOM节点创建页面
最后如果我们响应式对象发生变化，渲染器将再次调用渲染(Runder)函数
创建一个新的虚拟DOM节点
新的和旧的虚拟DOM节点对比，发送到补丁函数中，然后更新到页面

Vue3深度解析 学习笔记01