摘要：
之前的vue是使用虚拟 DOM的，但是Vue 3.6 带来了一个意义重大的更新： Vapor Mode 渲染模式。
Vue 渲染策略的演进：
- Vue 1.x： 基于模板渲染策略，直接将模板转换为DOM元素，并为每个DOM元素创建响应式绑定。
- Vue 2.x： 引入虚拟DOM，使渲染过程更加高效。虚拟DOM通过diff算法与真实DOM进行比较，减少了对DOM树的操作。
- Vue 3.x： 在虚拟DOM基础上，进一步优化了编译器，支持静态分析，生成更加高效的渲染函数。这使得Vue3在渲染性能方面相较于Vue2有了显著提升。
虚拟 DOM 的局限性：
尽管 Vue 3.x 引入了更强大的编译器，虚拟 DOM 依然面临内存消耗和计算开销的问题。虚拟 DOM需要对每次更新的节点进行遍历并计算差异，尤其是在渲染大量动态内容时，性能优势有限，所以换成Vapor Mode。
Vapor Mode是什么？
Vue 3.6 推出的编译期DOM优化模式，通过跳过运行时虚拟DOM，直接将模板编译为原生DOM操作代码，实现更高效的渲染性能。
核心特性：
- 无虚拟DOM： 运行时不再创建虚拟节点、对比（diff）或修补（patch），直接生成原生DOM操作指令。
- 性能提升： 编译时静态分析模板，减少运行时DOM操作次数，包体积更小，渲染速度更快。
- 跨平台兼容： 保留Vue原有的跨平台能力（如Web、SSR、小程序等）。
怎么工作的?
- 编译阶段分析模板： Vue 编译器在构建时会分析< template >中的内容，识别哪些是静态的、哪些是响应式的。
静态部分：如< div >标签，编译器会生成一次性创建它们的代码，运行时无需理会。
动态绑定：如 {{ count }}，每一个绑定都会生成一个独立的 “更新函数”。创建“Effect 函数”：每个响应式绑定都会生成一个独 - 立的副作用函数（effect）：
它知道自己依赖哪个响应式数据（如ref或reactive属性``）
它知道自己要操作哪个 DOM 节点（如某个< p >）
它知道要执行的操作是什么（如更新 textContent、修改class或调整style）
也就是说，一旦数据变化，只会触发该数据相关的DOM更新逻辑。
举个例子：
<template><div><h1>前端充电宝</h1><p>计数器: {{ count }}</p><button @click="count++">增加</button></div>
</template><script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
在 传统模式 中:
- 点击按钮时：Vue 会重新执行 render()，生成一份新的虚拟DOM；
- 然后 diff，找出 count 变了；最后再更新< p >标签的文本。
effect(() => {pElement.textContent = '计数器: ' + count.value
})
在 Vapor Mode 中：
- 编译时，Vue 识别出< p >的文本绑定了count；它为这个绑定生成一个更新函数。
- 当点击按钮后，
count更新，这个 effect 就直接执行，精准更新<p>的内容。全程没有虚拟 DOM，也没有 diff，对性能极为友好。
使用方式：
通过在 单文件组件 的< script >标签中添加 vapor 属性即可启用，无需修改业务逻辑代码。
适用场景：
主要解决传统虚拟DOM在动态节点较多时的性能瓶颈，例如高频更新的数据绑定或复杂组件渲染场景。
有啥优势？
- 更新速度快： 跳过 diff，只更新真正变化的 DOM；
- 占用更少内存： 不再维护虚拟 DOM；
- 首次渲染更快： 直接创建真实 DOM；
- 打包体积更小： 可移除虚拟 DOM 相关代码；
- 按需启用： 可在组件级别使用 Vapor，不影响全局；
那是不是虚拟 DOM 就过时了？
不是。Vue 并没有一刀切，而是走了“混合动力”路线：
- Vapor Mode 是可选的；
- < script setup> 中使用 vapor 关键字即可开启；
- 也可以通过 createVaporApp() 创建纯 Vapor 应用。
这意味着你可以：
- 在关键性能组件里启用 Vapor；
- 在其它部分继续使用虚拟 DOM。
什么时候用虚拟 DOM ，什么时候用 Vapor？
继续使用虚拟 DOM 的场景：
-
组件结构动态复杂，依赖 render 函数；
-
项目已成规模，虚拟 DOM 的性能已满足需求；
拥抱 Vapor Mode 的场景：
-
组件结构静态明确，状态变化点固定；
-
对性能要求极高：如移动端、嵌入式、实时数据 UI；
-
构建时间允许进行编译优化分析。
