Vue3.6 来袭：告别虚拟 DOM，性能起飞！

随着 Vue 3.6 alpha 版本发布，其带来了一种全新的渲染模式 Vapor Mode：可以绕过虚拟 DOM，带来极致的性能提升和更小的打包体积。

过去为何需要虚拟 DOM？

我们知道，频繁、大量的 DOM 操作会导致浏览器进行大量的重绘和回流，性能开销极大。

为了解决这个问题，Vue 等现代框架引入了虚拟 DOM，它是一个存在于内存中的 JavaScript 对象，是真实 DOM 的一个轻量级抽象描述。

虚拟 DOM 的极大地提升了开发效率，并优化了大多数场景下的性能，但它也有天生的成本：

• 需要始终在内存中维护一个虚拟 DOM 树
• 即使组件内容没有变化，每次更新也需要遍历 VNode 树进行比较

Vapor Mode 是 Vue 带来的一种可选的、基于编译时的全新渲染策略。

其核心思想是：在编译阶段，通过对模板的静态分析，生成比虚拟 DOM 更高效、更精准的 JavaScript 更新代码，从而在运行时完全绕过虚拟 DOM 的 Diff 和 Patch 过程。

Vapor Mode 在编译时就将模板中的动态绑定和结构关系分析得一清二楚，生成了“点对点”的、直接操作 DOM 的指令。

如何启用和使用 Vapor Mode？

启用方式非常简单，只需要将组件文件名更改为 .vapor.vue 后缀即可（此为当前提案，最终方案可能微调）。

Vapor Mode 组件 (Counter.va