跪拜 Guibai
← All articles
Frontend

Vue 3.6's Vapor Mode and alien-signals Rewrite the Frontend Performance Ceiling

By 涛涛ing ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The Virtual DOM has been the default rendering strategy for over a decade; Vapor Mode makes it optional without forcing a rewrite. Combined with a reactivity engine that outperforms SolidJS in some benchmarks, Vue 3.6 delivers a zero-breaking-change upgrade that can halve memory use and shrink bundles by two-thirds — a practical path to Svelte-tier performance for existing large-scale Vue applications.

Summary

Vapor Mode compiles Vue templates directly into native DOM manipulation instructions, eliminating VNode allocation, tree diffing, and patch calculation. The result is a 97% rendering speed improvement in component-dense scenarios, a two-thirds reduction in initial JavaScript payload, and the ability to mount 100,000 components in roughly 100ms — putting Vue on the same performance tier as SolidJS and Svelte 5. It is opt-in per component via a single attribute and coexists with traditional Virtual DOM components in the same tree.

alien-signals replaces Vue's reactivity engine with a Push-Pull algorithm that marks dependents as dirty on state changes but only recalculates values when they are actually read. Benchmarks show a 1.8x speedup over Vue 3.5 overall and over 30x higher throughput when reading large numbers of computed values, alongside a 65% memory reduction. The library is 1KB compressed and was independently developed by a Vue core contributor before being ported back into the framework.

The upgrade carries no breaking changes. Developers can install the beta, gain immediate performance improvements without modifying code, and selectively enable Vapor Mode on leaf components like list items and table rows. Ecosystem libraries including Ant Design Vue, Element Plus, and Varlet are already adapting.

Takeaways
Vapor Mode compiles templates into direct DOM manipulation code, skipping VNode creation, tree diffing, and patching entirely.
Enabling Vapor Mode requires only adding a `vapor` attribute to `<script setup>` or renaming a file to `.vapor.vue`.
Component-dense rendering is up to 97% faster, initial JS payload shrinks by two-thirds, and 100,000 components mount in about 100ms.
Vapor Mode is per-component opt-in and coexists with Virtual DOM components in the same tree without special wrappers.
alien-signals is a 1KB Push-Pull hybrid reactivity library that marks dependents dirty on change but recalculates only when values are actually read.
Computed-value throughput is over 30x higher than Vue 3.5; memory usage drops 65%, and memory fragmentation drops 82%.
Vue 3.6 has no breaking changes — upgrading from 3.5 requires no code modifications.
Vapor Mode currently does not support Options API, `<Suspense>`, `app.config.globalProperties`, or `getCurrentInstance()`.
The `vaporInteropPlugin` lets Vue 3.5 projects introduce Vapor components ahead of a full upgrade.
Ant Design Vue, Element Plus, Varlet, VueUse, and Pinia are all in various stages of 3.6 adaptation.
Conclusions

Making Vapor Mode per-component rather than all-or-nothing is a pragmatic bet: it avoids the Svelte 5 migration pain where the entire codebase must adopt runes, and lets teams optimize hotspots incrementally.

alien-signals being spun out as an independent 1KB library before being merged back suggests the Vue team is willing to validate core architectural bets outside the main repo — a pattern that de-risks large changes.

The 30x computed throughput figure is eye-catching but applies specifically to read-heavy scenarios; the 1.8x general speedup over 3.5 is the number most applications will actually feel.

Vue 3.6 and React 19 represent a genuine fork in frontend architecture: Vue is doubling down on client-side runtime performance through compilation, while React is pushing computation to the server with RSC. Both reduce client JavaScript, but through opposite mechanisms.

Concepts & terms
Vapor Mode
A Vue 3.6 compilation strategy that analyzes templates at build time and generates JavaScript instructions that directly manipulate the real DOM, bypassing the Virtual DOM's VNode allocation, tree diffing, and patch calculation entirely. It is opt-in per component.
alien-signals
A 1KB (compressed) reactive signal library using a Push-Pull hybrid algorithm. On state change, it pushes dirty markers down the dependency graph without recalculating values; recalculation happens only when a dependent is actually read. It replaces Vue's previous reactivity engine in 3.6.
Push-Pull hybrid algorithm
A reactivity strategy combining two phases: Push marks dependent computed properties as dirty when source state changes (a lightweight flag operation), and Pull recalculates values only when they are actually accessed. This avoids wasted recomputation of values that are never read.
Virtual DOM
A programming pattern where a lightweight in-memory representation of the UI tree is constructed, compared against a previous version on state changes (diffing), and the minimal set of real DOM updates is applied. It has been the dominant rendering strategy in React and Vue for over a decade.
createVaporApp()
An experimental Vue 3.6 API that creates an application instance with no Virtual DOM runtime included at all, enabling a fully Vapor-based Vue application.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗