Vue 3.6 Vapor Mode — Loại bỏ Virtual DOM, hiệu năng ngang Solid.js

Posted on: 4/21/2026 7:08:12 AM

Vấn đề với Virtual DOM

Kể từ khi React giới thiệu Virtual DOM vào năm 2013, hầu hết các framework frontend hiện đại đều áp dụng mô hình này: mỗi lần state thay đổi, framework tạo một cây Virtual DOM mới (lightweight JavaScript object), so sánh (diff) với cây cũ, rồi mới patch các thay đổi lên Real DOM.

Mô hình này mang lại DX tuyệt vời — developer viết code declarative, framework lo phần còn lại. Nhưng "sự tiện lợi" này có giá:

Vue 3 đã tối ưu đáng kể với compiler-informed VDOM — compiler phân tích template tại build-time để đánh dấu (patch flags) những phần nào thực sự dynamic, giúp runtime skip những node static. Nhưng bản chất vẫn là diff tại runtime, vẫn tạo VNode objects, vẫn tốn memory allocation.

Đó chính xác là ý tưởng đằng sau Vapor Mode.

Vapor Mode là gì?

Vapor Mode là một chiến lược biên dịch mới trong Vue 3.6, cho phép compiler chuyển đổi template thành các thao tác DOM trực tiếp — không qua bất kỳ lớp Virtual DOM nào. Tên gọi "Vapor" ám chỉ sự "bay hơi" của lớp abstraction VDOM.

Điểm đặc biệt: developer không cần thay đổi cách viết code. Cùng một <template>, cùng Composition API, cùng ref() / computed() — chỉ khác ở output mà compiler sinh ra.

Cơ chế biên dịch compile-time

graph LR
    A["<template>
SFC Source"] --> B["Vue Compiler
Parse + Analyze"]
    B --> C{"Vapor
enabled?"}
    C -->|No| D["VDOM Render
Function"]
    C -->|Yes| E["Direct DOM
Operations"]
    D --> F["Runtime Diff
+ Patch"]
    E --> G["Reactive
DOM Updates"]
    F --> H["Real DOM"]
    G --> H

    style A fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style B fill:#e94560,stroke:#fff,color:#fff
    style C fill:#ff9800,stroke:#fff,color:#fff
    style D fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style E fill:#4CAF50,stroke:#fff,color:#fff
    style F fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style G fill:#4CAF50,stroke:#fff,color:#fff
    style H fill:#2c3e50,stroke:#fff,color:#fff

So sánh output: Virtual DOM vs Vapor

Xét một component đơn giản:

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div class="counter">
    <h1>Bộ đếm</h1>
    <p>Giá trị: {{ count }}</p>
    <button @click="count++">Tăng</button>
  </div>
</template>

Virtual DOM mode sinh render function trả về VNode tree:

// Simplified output — VDOM mode
function render(_ctx) {
  return createVNode("div", { class: "counter" }, [
    createVNode("h1", null, "Bộ đếm"),
    createVNode("p", null, "Giá trị: " + _ctx.count),
    createVNode("button", { onClick: () => _ctx.count++ }, "Tăng")
  ])
}
// Mỗi re-render: tạo lại TOÀN BỘ cây VNode → diff → patch

Vapor Mode sinh code tạo DOM thật một lần, rồi chỉ cập nhật đúng phần thay đổi:

// Simplified output — Vapor mode
function setup() {
  const count = ref(0)

  // Tạo DOM thật — chạy MỘT lần
  const div = document.createElement("div")
  div.className = "counter"
  const h1 = document.createElement("h1")
  h1.textContent = "Bộ đếm"               // static — không bao giờ update
  const p = document.createElement("p")
  const btn = document.createElement("button")
  btn.textContent = "Tăng"
  btn.addEventListener("click", () => count.value++)

  div.append(h1, p, btn)

  // Reactive effect — CHỈ update đúng text node bị ảnh hưởng
  watchEffect(() => {
    p.textContent = "Giá trị: " + count.value
  })

  return div
}

Kiến trúc bên trong Vapor Mode

Compiler pipeline

Vapor Mode tận dụng chung frontend của Vue compiler (parse SFC → AST), nhưng từ bước code generation thì rẽ sang một backend hoàn toàn khác:

graph TD
    A["SFC Source Code"] --> B["@vue/compiler-sfc
Parse SFC"]
    B --> C["Template AST"]
    C --> D["Static Analysis
Phân loại node"]
    D --> E["Tách Static vs Dynamic"]
    E --> F["Static Nodes
→ Template Literal
(innerHTML một lần)"]
    E --> G["Dynamic Bindings
→ Fine-grained
Reactive Effects"]
    F --> H["Compiled Output"]
    G --> H
    H --> I["Minimal Runtime
~3KB"]

    style A fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style B fill:#e94560,stroke:#fff,color:#fff
    style C fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style D fill:#e94560,stroke:#fff,color:#fff
    style E fill:#ff9800,stroke:#fff,color:#fff
    style F fill:#4CAF50,stroke:#fff,color:#fff
    style G fill:#4CAF50,stroke:#fff,color:#fff
    style H fill:#2c3e50,stroke:#fff,color:#fff
    style I fill:#e94560,stroke:#fff,color:#fff

Các bước chính:

1. Parse: SFC được parse thành AST — bước này chung với VDOM mode
2. Static Analysis: Compiler phân loại từng node thành static (không bao giờ thay đổi) hoặc dynamic (phụ thuộc reactive state)
3. Template Hoisting: Các cây static được gom thành template literal, tạo bằng innerHTML một lần duy nhất — tối ưu hơn nhiều lần createElement từng node
4. Effect Generation: Mỗi dynamic binding được wrap trong một reactive effect riêng biệt, chỉ re-run khi dependency thay đổi
5. Minimal Runtime: Vapor không cần VDOM runtime (~45KB), chỉ cần một runtime nhỏ (~3KB) cho reactive scheduling

Tích hợp Reactivity System

Vapor Mode sử dụng chính reactivity system của Vue 3 (ref, computed, watch, effect) — không phải hệ thống mới. Điểm khác biệt nằm ở cách compiler kết nối reactive primitives với DOM:

Điều này tạo ra granularity ở mức expression thay vì component. Trong một component có 50 dynamic bindings, nếu chỉ 1 binding thay đổi, chỉ 1 effect chạy — không phải tạo lại 50 VNodes rồi diff.

Benchmark: Vue 3.6 vs React 19 vs Svelte 5

Dựa trên các benchmark từ cộng đồng và số liệu chính thức từ team Vue (Q1/2026):

Sử dụng Vapor Mode trong dự án

Cấu hình Vite

Vapor Mode yêu cầu Vue 3.6+ và Vite với plugin Vue cập nhật:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      features: {
        vaporMode: true  // Bật Vapor Mode compiler
      }
    })
  ]
})

Viết component với Vapor

Opt-in bằng cách thêm từ khóa vapor vào <script setup>:

<!-- ProductCard.vue — Vapor component -->
<script setup vapor>
import { ref, computed } from 'vue'

interface Props {
  name: string
  price: number
  discount?: number
}

const props = defineProps<Props>()
const quantity = ref(1)

const finalPrice = computed(() => {
  const base = props.price * quantity.value
  return props.discount
    ? base * (1 - props.discount / 100)
    : base
})

const addToCart = () => {
  // emit event hoặc gọi store
}
</script>

<template>
  <div class="product-card">
    <h3>{{ name }}</h3>
    <p class="price">{{ finalPrice.toLocaleString('vi-VN') }}đ</p>
    <div class="quantity">
      <button @click="quantity = Math.max(1, quantity - 1)">−</button>
      <span>{{ quantity }}</span>
      <button @click="quantity++">+</button>
    </div>
    <button class="add-btn" @click="addToCart">Thêm vào giỏ</button>
  </div>
</template>

Kết hợp Vapor và Virtual DOM

Vapor Mode hoạt động ở cấp component — trong cùng một ứng dụng, bạn có thể có cả component VDOM và component Vapor:

graph TD
    A["App.vue
(VDOM mode)"] --> B["Header.vue
(VDOM mode)"]
    A --> C["ProductList.vue
(Vapor ⚡)"]
    A --> D["Sidebar.vue
(VDOM mode)"]
    C --> E["ProductCard.vue
(Vapor ⚡)"]
    C --> F["FilterBar.vue
(Vapor ⚡)"]
    D --> G["CartWidget.vue
(VDOM mode)"]

    style A fill:#f8f9fa,stroke:#2c3e50,color:#2c3e50
    style B fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style C fill:#e94560,stroke:#fff,color:#fff
    style D fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style E fill:#e94560,stroke:#fff,color:#fff
    style F fill:#e94560,stroke:#fff,color:#fff
    style G fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50

Điều này cho phép migrate dần dần: bắt đầu bằng các component performance-critical (danh sách lớn, animations, real-time data), sau đó mở rộng khi Vapor Mode ổn định hơn.

Hạn chế và lưu ý

Tính đến tháng 4/2026, Vapor Mode vẫn ở trạng thái beta. Một số hạn chế cần biết:

Chiến lược áp dụng thực tế

Dựa trên đặc điểm của Vapor Mode, đây là chiến lược áp dụng khuyến nghị:

Một số patterns phù hợp nhất với Vapor Mode:

<!-- ✅ Lý tưởng cho Vapor: large list rendering -->
<script setup vapor>
import { ref } from 'vue'

const items = ref(generateLargeDataset(10_000))
const filter = ref('')

const filtered = computed(() =>
  items.value.filter(item =>
    item.name.toLowerCase().includes(filter.value.toLowerCase())
  )
)
</script>

<template>
  <input v-model="filter" placeholder="Tìm kiếm..." />
  <div class="virtual-list">
    <div v-for="item in filtered" :key="item.id" class="list-item">
      <span>{{ item.name }}</span>
      <span class="meta">{{ item.category }}</span>
    </div>
  </div>
</template>

Kết luận

Vue 3.6 Vapor Mode đánh dấu một bước tiến lớn trong kiến trúc frontend framework. Bằng cách chuyển công việc diff từ runtime sang compile-time, Vapor loại bỏ overhead của Virtual DOM mà không đánh đổi developer experience.

Với bundle size giảm 83% (từ 58KB xuống ~10KB), hiệu năng DOM manipulation tăng 36%, và khả năng mount 100.000 components trong 100ms, Vapor Mode đưa Vue vào nhóm framework hiệu năng cao nhất — cùng tier với Solid.js và Svelte 5.

Điều quan trọng nhất: đây là một evolution, không phải revolution. Cùng codebase, cùng Composition API, cùng hệ sinh thái — chỉ cần thêm một từ khóa vapor vào <script setup>. Chiến lược migrate dần dần (per-component opt-in) cho phép team áp dụng mà không cần rewrite.

Nguồn tham khảo:

• Vue 3.6.0-beta.1 Release Notes — vuejs/core
• Vue 3.6 Vapor Mode: The Rendering Revolution — Sadique Ali, Medium
• React 19 vs Vue 3.6 vs Svelte 5: 2026 Framework Convergence — byteiota
• Vue 3.6 Vapor Mode and the Evolution of Vite — DaydreamSoft
• Vue.js 2025 in Review and a Peek into 2026 — Vue School