在 Vue 中，我们除了熟悉的各种指令外，便是组件了。同时组件化也是 Vue 的核心思想之一。它允许我们用模板加对象描述的方式去创建一个组件，再给组件注入不同的数据，就可以完整的渲染出组件。
那么组件是怎么被渲染到浏览器上面的呢？Vue 中的组件其实很类似于 HTML 中的标签，那么我们可以参照浏览器处理 HTML 文件的方式来看 Vue 开发者们是怎么处理这些问题。浏览器在处理 HTML 文件的时候，会将HTML 抽象成一个 DOM树。
那么便可以得到一个树型结构，了解数据结构的朋友应该都知道，可以通过数组、对象等方式来构建一个树型结构，但是如果我们使用数组去构建这么一个内容其实是不利于我们后续对这些数据的一个操作的。所以 Vue 的开发者们对 Vue 中的组件 抽象成了一个对象。也就是 虚拟DOM（vnode）。它极大的提高了这些数据的可操作性，提升了 Vue 开发者们的可操作性。另一方面，由于拥有了 vnode，它并不直接与平台（浏览器和客户机等）接触，这样就使其拥有了跨平台的特性，需要什么平台的代码，将其编译成什么平台的代码即可。
使用 vnode 的好处：
1、为了提升操作空间（数据的整理）： vnode 的出现，构建了 DOM 与 vue的使用者 直接的关联性，同时 vue 开发者 可以利用这关联性进行诸多的操作：更新 DOM、添加 DOM、修改 DOM等等。比直接操作 DOM，更加的方便。
2、性能优化： vue 最出名的功能之一就是响应式，vue 的开发者们在早期的时候，可能考虑过对 真实DOM 的直接 diff，但 真实DOM 的身上所挂载原生方法较多 不利于 diff 算法 的优化。就抽象出了 vnode。
注意： 操作 vnode 并不一定比直接操作 原生DOM 的性能好，只是在 vue 这个框架中，vnode 是较好的选择。
3、跨平台： 虚拟 DOM 是一个纯粹的 JavaScript 数据结构，它并不依赖浏览器环境。这意味着你可以在服务器端生成虚拟 DOM，实现服务器端渲染（SSR），或者在其他平台（如 Native mobile）生成对应的视图。在 vue3 源码中，我们可以看见 有一个 compiler-core 文件夹，它就是为了实现跨平台的框架。
