Vue底层换成啥了？如何更新DOM的？

原创于 2025-07-22 20:19:17 发布 · 960 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

VUE 专栏收录该内容

72 篇文章

订阅专栏

在这里插入图片描述
摘要：

之前的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；
构建时间允许进行编译优化分析。