vue资料整理: VNode 与 虚拟DOM 是什么,原理如何

1.VNode 是什么

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

2.VNode 的作用

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

3.VNode 的优点

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

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

4.什么是虚拟 DOM?

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

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