Vue 3 Hakkında Bilmeniz Gerekenler ve Yenilikler

Vue 3, ilk yayınlandığı günden bu yana modern frontend dünyasında kendine çok güçlü bir yer edindi. İlk başlarda geliştirici araçlarının (Vue Devtools) ve ekosistemin yeni sürüme tam uyum sağlaması biraz zaman alsa da, günümüzde Vue 3 olgunlaşmış ve modern web geliştirmenin en kararlı standartlarından biri haline gelmiştir.

⚠️ Önemli Not: Vue 2 sürümü, 31 Aralık 2023 itibarıyla resmi desteğinin sonuna (End-of-Life) gelmiştir. Bu nedenle yeni projelerde veya mevcut altyapılarda Vue 3'e geçiş artık isteğe bağlı değil, güvenlik ve kararlılık açısından zorunlu bir hal almıştır.

💡 Özet (TL;DR):
Amaç: Vue 3'ün getirdiği radikal mimari yenilikleri, yeni bileşen türlerini ve modern yazım standartlarını kavramak.
Kilit Yenilikler: Composition API, <script setup> syntax'ı, Teleport, Fragments (Çoklu kök eleman), Vite yapılandırması ve Pinia durum yönetimi.
Motto: Modern frontend development with TypeScript support and lightning-fast reactivity.

1. Vue 3 ile Gelen Mimari Değişiklikler

Vue 3, dışarıdan bakıldığında Vue 2 şablonlarına benzese de, arka plandaki motoru tamamen TypeScript ile sıfırdan yazılmıştır. Bu da olağanüstü bir performans artışı ve geliştirici konforu sağlamıştır.

Yenilenen Render Motoru

Vue 3 çekirdeği ile bütünleşik olarak sıfırdan yazılan render motoru, yeni bir şablon derleyicisi (template compiler) içeriyor. Bu derleyici, statik kod analizi yaparak değişmeyen DOM düğümlerini tespit eder (Static Hoisting) ve reaktif güncellemeler sırasında bu düğümleri atlayarak sanal DOM (Virtual DOM) performansını maksimuma çıkarır.

Açık API'ler (Exposed APIs)

Artık Vue'nun reaktivite sistemi (reactive, ref, computed vb.) framework bağımsız hale geldi. Yani Vue uygulaması render etmeden bile, sadece reaktivite kütüphanesini çekerek vanilla JavaScript projelerinizde veya farklı kütüphaneler (örn: React) içinde reaktif durum yönetimini kullanabilirsiniz.

2. Yeni Yerleşik Bileşenler (Built-in Components)

Vue 2'de harici kütüphanelerle çözmeye çalıştığımız veya DOM yapısını bozan bazı sınırlar Vue 3 ile yerleşik bileşenlerle standartlaştırıldı.

Parçalar (Fragments)

Vue 2'de her bileşenin <template> bloğu içinde tek bir ana sarmalayıcı (genellikle bir <div>) elemanı bulunması şarttı. Vue 3 ile gelen Fragments desteği sayesinde, artık bileşenlerinizin kök seviyesinde dilediğiniz kadar eleman barındırabilirsiniz. Bu durum DOM ağacında gereksiz sarmalayıcı eleman birikmesini önler.

<!-- Vue 3.x Layout.vue (Gereksiz sarmalayıcı div yok) -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Işınlanma (Teleport)

Bir elemanı mantıksal olarak tanımlandığı bileşenin dışına, örneğin doğrudan <body> etiketinin altına render etmek istediğimizde kullanılır. Modal pencereleri, bildirim kutuları (toast) ve tooltip tasarımları için harika bir çözümdür.

<template>
  <button @click="open = true">Modali Aç</button>
  
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Bu modal doğrudan body altına render edildi!</p>
      <button @click="open = false">Kapat</button>
    </div>
  </Teleport>
</template>

Askıya Alma (Suspense)

Bileşen ilk defa yüklenirken veya asenkron veri tabanı / API istekleri tamamlanırken kullanıcıya bir yükleniyor (loader) veya fallback arayüzü göstermeyi kolaylaştıran özel bir sarmalayıcıdır.

<template>
  <Suspense>
    <!-- Asenkron veri çeken ana bileşen -->
    <template #default>
      <AsyncUserDashboard />
    </template>
    
    <!-- Yüklenme esnasında gösterilecek şablon -->
    <template #fallback>
      <div>Yükleniyor...</div>
    </template>
  </Suspense>
</template>

3. API ve Yazım Değişiklikleri

Uygulama Başlatma ve Mount Değişikliği

Vue 2'de küresel eklentiler, router veya store tanımları doğrudan ana Vue sınıfı üzerinden yapılıyor ve bu durum birden fazla Vue uygulamasının aynı sayfada çalıştırılmasını zorlaştırıyordu. Vue 3 ile birlikte her uygulama kendi createApp örneğini kullanır.

// Vue 2.x Uygulama Başlatma
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(Vuex);
const store = new Vuex.Store({});

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

// Vue 3.x Uygulama Başlatma
import { createApp } from 'vue';
import { createStore } from 'vuex';
import App from './App.vue';

const store = createStore({});

createApp(App)
  .use(store)
  .mount('#app');

Filtrelerin (Filters) Kaldırılması

Vue 2'de sıklıkla kullanılan {{ price | formatCurrency }} şeklindeki boru hattı (pipe) filtreleri Vue 3 ile birlikte performansı olumsuz etkilediği için kaldırılmıştır. Bunun yerine artık standart metotlar (methods) veya hesaplanmış özellikler (computed) kullanılması önerilir.

4. Modern Vue 3 Standartları

Günümüz Vue 3 ekosisteminde kod yazım ve proje yönetim standartları şu şekilde evrilmiştir:

Composition API ve `<script setup>`

Vue 3, geleneksel Options API'ın (data, methods, computed blokları) yerine, kodları mantıksal gruplara göre ayırıp tekrar kullanılabilir (composables) kılmayı sağlayan Composition API'ı getirdi.

Daha sonra tanıtılan <script setup> sözdizimi ise bu yapıyı çok daha temiz ve az boilerplate kod ile yazmamıza imkan tanıyor. Artık modern Vue projelerinde varsayılan standart budur:

<!-- Modern Vue 3 Component (<script setup>) -->
<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('Bileşen yüklendi!')
})
</script>

<template>
  <button @click="increment">Sayaç: {{ count }}</button>
</template>

Pinia Durum Yönetimi

Vue 3 ile birlikte resmi state yönetim kütüphanesi Vuex'ten Pinia'ya geçiş yapılmıştır. Pinia, çok daha hafiftir, TypeScript tip desteğine tam uyumludur, karmaşık mutations kavramını barındırmaz ve doğrudan actions üzerinden state güncellemelerine izin verir.

Vite Yapı Aracı

Vue CLI (Webpack tabanlı) yerini tamamen Vite derleme motoruna bırakmıştır. Vite, tarayıcı tabanlı ES modüllerini (ESM) kullanarak geliştirme aşamasında saniyeler içinde ayağa kalkan, son derece hızlı bir derleme deneyimi sunar.

Seçenekler Karşılaştırma Matrisi

Kriter	Options API (Vue 2/3)	Composition API (Vue 3)	`<script setup>` (Modern Vue 3)
Kod Düzeni	`data`, `methods` blokları	Mantıksal gruplama	Mantıksal gruplama
Boilerplate Kod	Orta düzeyde	Yüksek (`setup` ve `return` gerekir)	Çok Düşük (En sade yazım)
TypeScript Desteği	Zayıf / Zorlama	Çok İyi	Mükemmel (Native)
Bileşen Boyutu	Küçük / Orta projeler için uygun	Büyük / Karmaşık yapılar için uygun	Tüm projelerde önerilen standart

Sıkça Sorulan Sorular (FAQ)

Neden Vuex yerine Pinia kullanmalıyım?

Pinia, Vuex'e kıyasla oldukça basitleştirilmiş bir API sunar. mutations katmanı olmadığı için kod yazım hamallığını azaltır. Ayrıca TypeScript ile entegre edildiğinde otomatik tip tanımlamalarını eksiksiz olarak sunarak geliştirme hatalarını en aza indirir.

Vue 2 projemizi Vue 3'e geçirmek zorunlu mu?

Evet, teknik olarak zorunludur. Vue 2 artık güvenlik güncellemeleri almıyor. Modern web kütüphaneleri ve NPM paketleri de artık sadece Vue 3'ü destekleyecek şekilde güncellenmektedir. Projenizin sürdürülebilirliği için geçiş planı yapmanız önerilir.

`<script setup>` kullanırken reactive nesneleri `return` etmeli miyim?

Hayır. <script setup> bloğu içinde tanımlanan tüm değişkenler, fonksiyonlar ve import edilen diğer bileşenler şablon (template) katmanında doğrudan kullanılabilir durumdadır. Ekstra bir return objesi oluşturmanıza gerek kalmaz.

Bu Yazıda Yapılan Değişiklikler

20.06.2026: Yazı tamamen modernize edildi. Vue 2 EOL (End of Life) bilgilendirme notu eklendi. Mükerrer başlıklar temizlendi, yarım kalan cümleler tamamlandı ve kod hataları düzeltildi. Güncel Vue 3 standartları olan <script setup>, Vite derleme aracı ve Pinia state yönetimi yazılı olarak ve kod örnekleriyle eklendi.
11.05.2022: Yazı özeti düzenlendi.