从头开始创建自己的Vue.js—第2部分（虚拟DOM基础）
这是从头开始创建Vue.js系列文章的第二部分，在这里我教您如何创建诸如Vue.js之类反应式框架的基础。在第一部分中，描述了我们需要的部分以及遵循的路线图。如果您还没有阅读过，建议您在阅读本文之前先阅读。
我只有1年的Vue.js工作经验，但是我参加了Evan You本人提供的8小时课程（在阿姆斯特丹我学会了Vue.js的内部工作原理并使我真正地 了解幕后的“魔术”是如何工作的。该博客系列旨在教给那些对我在那个奇妙的研讨会上学到的东西感兴趣的人。
路线图🚘
1.介绍2.虚拟DOM基础（本文）3.实施虚拟DOM和渲染4.构建反应式5.总结
什么是虚拟DOM？
💡DOM =文档对象模型，一个网站的HTML结构
💡VDOM =该结构的代表性副本
虚拟DOM是将真实DOM表示为JavaScript格式的一种形式，它比每次发生更改时都操纵真实DOM更加容易。
如果您不想将DOM呈现给浏览器，而是呈现给一个字符串（例如，在服务器端呈现时很方便），它也很有用。
虚拟节点
因此，虚拟DOM由虚拟节点组成，在我们要编写代码的示例中，虚拟节点将类似于以下内容：
{
tag: 'div',
props: {
class: 'container'
},
children: [
{
tag: 'h1',
props: {},
children: 'Hello World'
},
{
tag: 'p',
props: {},
children: 'Lorem ipsum dolor sit amet.'
}
]
}
上面的示例等效于以下HTML代码：
<div class="container">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
因此，所有虚拟节点由以下组成：
作为字符串的
HTML标记属性对象
子级列表可以是：
另一个节点
文本（表示内容）
虚拟DOM骨架
在我们的示例中，我们将不会构建一个成熟的虚拟DOM“引擎”，但足以理解基础知识。
让我们看看虚拟DOM的编码。我们将把所有未来的代码建立在以下几行上。因此，创建一个包含以下内容的HTML文件：
<div id="app"></app>
<script>
// Create virtual node
function h(tag, props, children) {
// Return the virtual node
}
// Mount a virtual node to the DOM
function mount(vnode, container) {
// Create the element
// Set props
// Handle children
// Mount to the DOM
}
// Unmount a virtual node from the DOM
function unmount(vnode) {
// Unmount the virtual node
}
// Take 2 vnodes, compare & figure out what's the difference
function patch(n1, n2) {
// Case where the nodes are of the same tag
// Case where the new vnode has string children
// Case where the new vnode has an array of vnodes
// Case where the nodes are of different tags
}
function render(message) {
// Render a virtual node with a given message
}
// Create virtual nodes & render them below this line...
</script>
如您所见，我们有五个不同的函数，它们都在创建和呈现虚拟DOM：
h函数创建一个虚拟节点（但尚未将其装载到真实DOM中）。我将其称为h，因为在Vue.js项目中也是如此。mount函数将采用给定的虚拟节点并将其装载到真实DOM中的给定容器。对于第一个元素，这将是我们在文件顶部创建的#app节点。unmount将虚拟节点从父节点中删除虚拟节点。patch目前为止我们为VDOM编写的最大功能。这是因为我们必须比较两个不同的节点，并以递归方式检查所有差异（以递归方式对所有子节点执行此操作）。render是render函数的简化版本。在我们的示例中，它使用给定的消息创建了各种虚拟节点（我们稍后对其进行了更改，以演示我们的VDOM“引擎”的工作方式）。
下一步做什么
在第1部分中，我们了解了构建自己的类似Vue.js框架所需的构建部件，在这一部分中，我们了解了如何构建虚拟DOM的基础知识。
在下一章中，我们将实际实现完整的虚拟DOM部分。
敬请期待😉