Vue 3.6 ile gelecek olan Vapor Mode bu sonbaharda yayınlanacak ve çerçevenin daha önce hiç yapmadığı bir şeyi yapacak: tek dosyalı bileşenleri (single-file components), sanal DOM'u (virtual DOM) tamamen devre dışı bırakarak doğrudan DOM güncellemelerine dönüştürecek.

Vue neden sanal DOM'a sırtını dönüyor?

Vue 2'den beri sanal DOM, çerçevenin reaktivite modelinin merkezinde yer alıyor. Durum (state) değiştiğinde Vue, bellekte hafif bir ağaç yapısı oluşturur, bunu önceki sürümle karşılaştırır (diffing) ve yalnızca farklı olan kısımları yamalar (patching). Bu dolaylı yöntem, geliştiricilerin hangi öğenin güncellenmesi gerektiği konusunda endişelenmeden deklaratif kod yazmasına olanak tanır. Bunun bedeli ise, her render işleminin hala o sanal ağacı oluşturma ve karşılaştırma maliyetini üstlenmesidir.

Vapor Mode bu ara adımı ortadan kaldırıyor. Derleme sırasında Vue derleyicisi şablonu analiz eder ve değişikliğin gerektiği yerde doğrudan yerel DOM yöntemlerini —element.textContent = …, element.setAttribute(...)— çağıran JavaScript kodları üretir. Hiçbir sanal düğüm (virtual node) oluşturulmaz, hiçbir karşılaştırma döngüsü (diffing loop) çalışmaz. Paket (bundle), yazdığınız somut güncellemeler için gereken kodun yanı sıra reaktivite için gereken çalışma zamanını (runtime) içerir.

Boyut ve hız üzerinde gerçek dünya etkisi

  • Paket boyutu – Sanal DOM çalışma zamanı ve veri yapıları çıkarılarak üretilen kod küçülür. Saniyede onlarca kez güncellenen büyük ızgaralara (grids) veya tuval (canvas) uygulamalarına sahip projelerde, bu tasarruflar özellikle düşük bant genişliğine sahip bağlantılarda birikir.
  • Performans – Doğrudan DOM çağrıları, kullanıcı arayüzünün (UI) yüksek frekansta değiştiği durumlarda fark edilen karşılaştırma (diffing) yükünü atlar. Bir dizi kişisel tarayıcı oyununda —bir nonogram, bir mayın tarlası klonu ve 3 boyutlu bir Rubik küpü görselleştiricisi— render mantığını elle yazdım ve DOM'u yalnızca gerekli olan yerlerde güncelledim.
  • Geliştirici ergonomisi – Ağır işi derleyici yapar. Hala normal Vue şablonları yazarsınız; document.querySelector çağrılarını elle oluşturmak zorunda kalmazsınız. Üretilen kod, o oyunlarda bana en iyi performansı sağlayan elle yazılmış yaklaşımı yansıtır.

Vapor Mode aslında ne zaman yardımcı olur?

  1. Büyük yapılarda yüksek frekanslı güncellemeler – Oyunlar, veri yoğunluklu paneller (dashboards) veya her adımda (tick) birçok hücreyi yeniden çizen herhangi bir arayüz en çok faydayı sağlar. Her adımda büyük bir ızgarayı karşılaştırmak kare bütçesini (frame budget) tüketebilir; doğrudan güncellemeler işi doğrusal ve öngörülebilir tutar.
  2. Paket boyutu kısıtlı dağıtımlar – Birkaç yüz kilobayttan az yüklenmesi gereken mobil öncelikli siteler, sanal DOM çalışma zamanı ortadan kalktığında somut bir azalma görür.
  3. Saf, öngörülebilir durum – Vapor Mode, durumu (state) değişmez (immutable) tuttuğunuzu ve DOM'u bu durumun saf bir yansıması olarak ele aldığınızı varsayar. Eğer kodunuz yan etkilerle (side-effects) karışık çalışıyorsa veya DOM'u Vue'nun reaktivite sistemi dışında değiştiriyorsa, üretilen güncellemeler senkronizasyon dışına çıkabilir ve görsel hatalara (glitches) neden olabilir.

Eski yaklaşımın hala kazandığı yerler

  • Düşük frekanslı kullanıcı arayüzleri – Sadece ara sıra gerçekleşen kullanıcı eylemleriyle yeniden render edilen basit formlar, statik sayfalar veya yönetim panelleri çok az performans kazanır. Sanal bir ağaç oluşturmanın getirdiği ek iş, ağ gecikmesi veya sunucu işleme süresiyle kıyaslandığında ihmal edilebilir düzeydedir.
  • Karmaşık bileşen hiyerarşileri – Derin bir ağaçta yalnızca bir yaprak düğüm (leaf node) değiştiğinde, sanal DOM büyük bölümleri otomatik olarak atlayabilir. Doğrudan güncellemeler, derleyiciyi her olası değişiklik için kesin yamalar üretmeye zorlar; bu da uç durumlarda (edge cases) kod boyutunu artırabilir.
  • Araçlar ve ekosistem – Birçok Vue eklentisi, geliştirici araçları (devtools) ve test yardımcıları sanal DOM katmanına bağlıdır. Ekosistem yetişene kadar, bu entegrasyonların Vapor Mode bileşenleriyle çalışabilmesi için güncellenmesi gerekebilir.

Sırada ne var?

  • Kararlı sürüm – Vue 3.6 şu anda aday sürüm (release-candidate) aşamasındadır. Ekip, bu sonbaharda nihai kararlı sürümü yayınlamayı planlıyor. Erken benimseyenler, üretim kodunu (production code) yayınlamadan önce bu sürümü beklemelidir.
  • Geçiş yolu – Mevcut Vue projeleri, bileşen bazında Vapor Mode'u kullanmayı seçebilir.
  • Performans araçları – Gerçek dünya uygulamalarında sanal DOM ve Vapor Mode sürümlerini karşılaştıran kıyaslamalar (benchmarks), ekiplerin bu değişimin ne zaman değeceğine karar vermesine yardımcı olacaktır.

Özetle

Vapor Mode, Vue geliştiricilerine iki dünyanın da en iyisini sunuyor: sevdikleri deklaratif sözdizimi ve elle hazırlanmış DOM güncellemelerinin ham hızı. UI'ın büyük bölümlerini saniyede birçok kez yenileyen uygulamalar ve her kilobaytın kritik olduğu dağıtımlar için öne çıkıyor. Düşük trafikli arayüzler için geleneksel virtual DOM, tamamen uygulanabilir ve daha basit bir seçenek olmaya devam ediyor. Özellik, release candidate aşamasından stable aşamasına geçerken, Vue topluluğunun paket boyutu tasarruflarını, ekosistem hazır bulunuşluğu ve uygulamalarının özel performans profili ile tartması gerekecek.