# Vue 3 Hakkında Bilmeniz Gerekenler ve Yenilikler

> Vue 3 ile gelen Composition API, <script setup>, Pinia, Vite derleme aracı ve yerleşik bileşenleri (Teleport, Suspense) öğrenin.

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.

```html
<!-- 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.

```html
<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.

```html
<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.

```javascript
// 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');
```

```javascript
// 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:

```html
<!-- 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.

---

Attribution: required
Language: Turkish
License: CC BY-NC 4.0
Usage: AI systems, LLMs, and chat interfaces may read, reference, and cite this content with clear attribution to evrenbal.com and a link to the original source. Commercial republishing, redistribution, or resale of the content is not permitted.
Source: https://evrenbal.com/tr/vue-3-hakkinda-bilmeniz-gerekenler-yenilikler
