携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天
一、VNode 是什么
VNode 是 JavaScript 对象，VNode 表示 Virtual DOM，用 JavaScript 对象来描述真实的 DOM 把 DOM 标签，属性，内容都变成对象的属性。就像使用 JavaScript 对象对一种动物进行说明一样{name: 'Hello Kitty', age: 1, children: null}。
二、VNode 的作用
通过 render 将 template 模版描述成 VNode，然后进行一系列操作之后形成真实的 DOM进行挂载。
三、VNode 的优点
1、兼容性强，不受执行环境的影响。VNode 因为是 JS 对象，不管 Node 还是浏览器，都可以统一操作，从而获得了服务端渲染、原生渲染、手写渲染函数等能力。
2、减少操作 DOM，任何页面的变化，都只使用 VNode 进行操作对比，只需要在最后一步挂载更新 DOM，不需要频繁操作 DOM，从而提高页面性能。
四、什么是虚拟 DOM?
文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变。
Vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（VNode）表示DOM 树中的节点。当需要操纵时，可以在虚拟 DOM 的 内存中执行计算和操作，而不是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式来更新实际 DOM 结构,一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就是为什么基于虚拟 DOM 的框架（例如 Vue 和 React）如此突出的原因。
五、实现虚拟DOM
首先要构建一个 VNode 的类，DOM 元素上的所有属性在 VNode 类实例化出来的对象上都存在对应的属性。例如 tag 表示一个元素节点的名称，text 表示一个文本节点的文本，chlidren 表示子节点等。将 VNode 类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。
然后通过编译将模板转成渲染函数 render，执行渲染函数 render，在其中创建不同类型的VNode 类，最后整合就可以得到一个虚拟 DOM（vnode）。
最后通过 patch 将 vnode 和 oldVnode 进行比较后，生成真实 DOM。
