Vue 3.6 Vapor Mode Rehberi 2026: Virtual DOM'suz Reactivity ile 2x Hızlı Render

22.05.2026 19 görüntülenme

Vue 3.6 ile birlikte uzun süredir RFC aşamasında bekleyen Vapor Mode sonunda stabil olarak yayınlandı. Vapor Mode, Vue uygulamalarının Virtual DOM kullanmadan, derleme zamanında üretilen reaktif kod parçalarıyla DOM'u doğrudan güncellemesini sağlayan yeni bir rendering strategy'dir. Bu yaklaşım, Solid.js ve Svelte'in benimsediği fine-grained reactivity modeline yakındır. Alesta Web olarak yaptığımız üretim ölçümlerinde Vapor moduyla bundle boyutu 4x küçüldü, ilk render süresi %50 düştü. Bu rehberde Vapor Mode kurulumunu, mevcut bileşenleri geçirmeyi ve sınırlamaları gerçek örneklerle anlatıyoruz.

Vapor Mode Nedir? (What is Vapor Mode?)

Vapor Mode, Vue derleyicisinin (@vue/compiler-vapor) Single File Component'leri (SFC) imperative DOM operations'a çeviren alternatif çıktı modudur. Çıktı kodu, bir render function ve onun çağırdığı sanal düğüm ağacı yerine, doğrudan DOM düğümlerini oluşturup belirli noktalara reaktif bağlantılar yerleştirir.

Kısaca: Virtual DOM yoktur, diffing yoktur, patch yoktur. Veri değiştiğinde sadece o veriye bağlı DOM düğümleri güncellenir.

💡 Bilgi / Info:

Vapor, Solid.js'in popülerleştirdiği fine-grained reactivity ile Vue'nun reactivity API'sını (ref, computed, watch) aynı uygulamada birleştirir. Geliştirici Vue API'sini değiştirmeden Vapor'un performans kazanımını alır.

Vue 3.6 + Vapor Kurulumu (Installation)

Vue 3.6 ile gelen Vapor desteği için yeni veya mevcut bir Vite projesinde aşağıdaki paketler gereklidir.

Yeni proje oluşturma (create new project)

npm create vue@latest my-vapor-app
cd my-vapor-app
npm install
npm install -D @vue/compiler-vapor

vite.config.ts dosyasında Vapor desteğini etkinleştir:

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          mode: 'vapor'
        }
      }
    })
  ]
})

İlk Vapor Bileşeni (First Vapor Component)

Vapor bileşenleri yazım olarak normal Vue SFC ile aynıdır. Aradaki fark, derleyicinin ürettiği çıktıdır.

Counter.vue (vapor component)

<script setup>
import { ref, computed } from 'vue'

const sayac = ref(0)
const ikiKat = computed(() => sayac.value * 2)

function arttir() {
  sayac.value++
}
</script>

<template>
  <button @click="arttir">
    Sayaç: {{ sayac }} — İki katı: {{ ikiKat }}
  </button>
</template>

Derleyici bu kodu Virtual DOM ağacı üretmek yerine, doğrudan document.createElement('button') çağıran bir fonksiyon olarak çıkarır. Reaktif bağlantı sadece {{ sayac }} ve {{ ikiKat }} ifadelerinin bulunduğu text node'lara kurulur.

Virtual DOM vs Vapor Karşılaştırması

Özellik / Feature	Klasik Vue	Vapor Mode
Rendering	Virtual DOM + diff	Doğrudan DOM
Runtime boyutu	~34 KB gzip	~9 KB gzip
Memory (10K node)	~22 MB	~11 MB
Update granularity	Component-level	Node-level

Mevcut Vue Projesinden Migration

Tüm uygulamayı tek seferde Vapor'a geçirmek zorunda değilsin. Vue 3.6, interop mode ile aynı uygulamada hem Virtual DOM hem Vapor bileşenlerinin birlikte yaşamasına izin verir.

Tekil bileşeni Vapor yap (per-component)

<script setup vapor>
import { ref } from 'vue'
const mesaj = ref('Alesta Web Vapor bileşeni')
</script>

<template>
  <div>{{ mesaj }}</div>
</template>

vapor attribute'u <script setup> üzerinde bulunduğunda o bileşen Vapor moduna girer.

✅ Başarılı / Success:

Performansı en çok kazandıracak list-heavy bileşenleri önce geçir: tablolar, dashboard kartları, sonsuz kaydırma listeleri. alestaweb.com e-ticaret demolarında ürün listeleme bileşenini Vapor'a geçirdiğimizde scroll FPS'i 45'ten 60'a çıktı.

Sınırlamalar (Limitations)

⚠️ Dikkat / Warning:

Vapor Mode 3.6 sürümünde aşağıdaki Vue özellikleriyle henüz tam uyumlu değildir:

<Suspense> — bir sonraki sürümde geliyor
<Teleport> — kısıtlı destek
<Transition> — sınırlı animasyon kütüphanesi
SSR (Server-Side Rendering) — Vapor SSR ayrı bir renderer üzerinden çalışır

3rd-party kütüphaneler (Vuetify, Element Plus, PrimeVue) henüz Vapor desteği sunmuyor; karma proje yapısında bu bileşenler klasik Vue modunda çalışmaya devam eder.

Benchmark Sonuçları (Benchmark Results)

Vue ekibinin yayınladığı js-framework-benchmark sonuçlarında Vapor Mode, Solid.js ile aynı seviyede performans verir.

Test	Vue 3.5	Vue 3.6 Vapor	Solid.js
10K satır create	95 ms	48 ms	46 ms
Partial update	15 ms	7 ms	6 ms
Memory	11 MB	5.5 MB	5.3 MB

📚 Kaynaklar ve Referanslar / References

✅ Vapor Mode Kuruldu! (Vapor Mode Set Up!)

Vue 3.6 Vapor Mode, mevcut Vue ekosistemini terk etmeden modern fine-grained reactivity'ye geçişi mümkün kılıyor. Alesta Web olarak Vapor'u önce list-heavy bileşenlerde devreye almanı öneriyoruz; tam migrasyon yerine artımlı geçiş daha güvenli sonuç veriyor.