Vue3.6正式进入RC阶段 全新Vapor Mode无虚拟DOM性能升级

Vue 3.6 要来了！近日，Vue 官方正式发布：v3.6.0-rc.1

这意味着 Vue 3.6 正式进入 RC（Release Candidate）阶段。

官方表示：Vue 3.6 已经完成 Vapor Mode 的预期功能开发。

这一次更新，最值得关注的两个方向：

• Vapor Mode
• 全新 @vue/reactivity 响应式系统重构

Vue 正在探索下一代渲染架构。

Vapor Mode：Vue 下一代编译模式

过去 Vue 的核心渲染流程：

Template → Compiler → Virtual DOM → Diff → DOM Update

Virtual DOM 一直是 Vue 的核心设计。

但随着应用规模越来越大，运行时开销和 bundle size 也成为性能优化的重要方向。

因此 Vue 3.6 带来了：**Vapor Mode**

什么是 Vapor Mode？

官方定义：

Vapor Mode 是 Vue Single-File Components（SFC）的一种新的编译模式，目标是减少基础 bundle size 并提升性能。

简单理解：

• 传统 Vue：Vue Template → Render Function → Virtual DOM Runtime → DOM
• 开启 Vapor 后：Vue Template → Vapor Compiler → DOM Update

通过新的编译路径，减少部分 Virtual DOM 运行时成本。

官方表示：

Vapor Mode 在第三方 benchmark 中：已达到与 Solid 和 Svelte 5 相同水平的性能表现。

如何开启 Vapor Mode？

Vapor Mode 最大特点：

100% Opt-in

不会影响现有 Vue 项目。

开发者可以根据场景选择开启。

方式一：<script setup vapor>

<script setup vapor>

</script>

<template>
  <div>
    Hello Vapor
  </div>
</template>

方式二：<script vapor>

这是：

<script setup vapor>

的简写形式。

方式三：template vapor

也可以直接：

<template vapor>
  <div>
    Hello Vapor
  </div>
</template>

整个 SFC 会使用 Vapor 编译模式。

Vapor 可以和普通 Vue 共存

Vue 3.6 支持渐进式迁移。

比如：

• 普通业务页面继续使用 VDOM
• 性能敏感页面使用 Vapor

两种组件可以同时存在。

如果整个应用全部使用 Vapor Component：

Vue 提供：

import { createVaporApp } from 'vue'
import App from './App.vue'

createVaporApp(App)
  .mount('#app')

相比普通：

createApp(App)

纯 Vapor 应用不会加载 Virtual DOM Runtime。

因此可以进一步降低基础包体积。

普通 Vue 项目如何接入？

如果项目继续使用：

createApp(App)

想使用 Vapor Component，需要安装：

import {
  createApp,
  vaporInteropPlugin
} from 'vue'

createApp(App)
  .use(vaporInteropPlugin)
  .mount('#app')

开启后：Vapor Component 和 VDOM Component 可以互相嵌套。

目前支持：

• props
• events
• slots

不过官方提醒：

使用基于 VDOM 的组件库时，仍可能存在一些边界问题。

第二个重点：响应式系统重构

除了 Vapor Mode。

Vue 3.6 还带来了：

全新的 @vue/reactivity 实现。

官方表示：

新的响应式系统基于：alien-signals 进行了重大重构。

主要优化：

• 更高性能
• 更低内存占用

这会影响 Vue 最核心的数据更新机制。

Vapor Mode 当前限制

由于 Vapor 使用新的编译模式，目前只支持 Vue 的部分能力。

以下功能暂不支持：

• Options API，例如：

  export default {
    data() {}
  }

• app.config.globalProperties：不支持全局属性注入。
• getCurrentInstance()，在 Vapor Component 中：

  getCurrentInstance()

  会返回：

  null

• v-memo：不支持。
• Template refs 不会暴露：$el、$props、$attrs、 、$slots、$refs

Vue 3.6 的意义

Vue 3.6 带来的变化：

Vue 3→ Virtual DOM→ Vapor Mode→ Compiler Optimization

Vue 并没有要求开发者立即迁移。

而是提供了一条新的路线：

在已有项目中逐步尝试 Vapor Mode，让性能敏感场景获得更轻量的运行体验。

从 Vue 3.0 到 Vue 3.6：

Vue 一直在优化开发体验。

而 Vapor Mode，代表 Vue 开始向：

更轻运行时、更强编译优化、更高性能渲染 方向继续探索。

以上关于Vue3.6正式进入RC阶段 全新Vapor Mode无虚拟DOM性能升级的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。