vode是什么虚拟dom是什么(虚拟ovif)

导语：66、VNode 是什么？什么是虚拟 DOM？（高薪常问）

1、Vnode 是什么

Vnode 是 JavaScript 对象，Vnode 表示 Virtual DOM，用 JavaScript 对象来描述真实的 DOM把 DOM 标签，属性，内容都变成对象的属性。就像使用 JavaScript 对象对一种动物进行说明一样{name: &39;, age: 1, children: null}。

（1）Vnode 的作用

通过 render 将 template 模版描述成 Vnode，然后进行一系列操作之后形成真实的DOM 进行挂载。

（2) Vnode 的优点

（2-1) 兼容性强，不受执行环境的影响。Vnode 因为是 JS 对象，不管 node 还是浏览器，都可以统一操作，从而获得了服务端渲染、原生渲染、手写渲染函数等能力。

（2-2) 减少操作 DOM，任何页面的变化，都只使用 Vnode 进行操作对比，只需要在最后一步挂载更新 DOM，不需要频繁操作 DOM，从而提高页面性能。

3、 什么是虚拟 DOM?

（1）文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变得非常缓慢

（2）Vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（Vnode）表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM 的 内存中执行计算和操作，而不是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式来更新实际 DOM 结构,一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就是为什么基于虚拟 DOM 的框架（例如 Vue 和 react）如此突出的原因。

本文内容由小楠整理编辑！