Vue 3 Composition API'yi Ustalaşmak: Ölçeklenebilirlik ve Yeniden Kullanılabilirliği Açığa Çıkarmak

Yıllar boyunca Options API, Vue.js geliştirme sürecinin standart ritmiydi. Küçük ve orta ölçekli uygulamalar için etkili olsa da, karmaşıklık arttıkça geliştiricileri ilgili mantığı data, methods ve watchers gibi birden fazla özelliğe yaymak zorunda bıraktı. İşte tam bu noktada Composition API devreye giriyor; Vue bileşenlerini organize etmenin yeni bir yolu olarak masaya olağanüstü düzeyde yapı, ölçeklenebilirlik ve yeniden kullanılabilirlik getiriyor. Bu yazıda, neden geçiş yapmanız gerektiğini ve gücünden nasıl etkili bir şekilde yararlanabileceğinizi inceliyoruz.

Options API'nin Sınırlamaları

Çözüme dalmadan önce sorunu anlamak kritik öneme sahiptir. Options API'de mantık, seçenek türüne göre gruplanırdı. Örneğin, karmaşık bir form doğrulama bileşeni oluşturuyorsanız, doğrulama mantığınız durum (state) için data, türetilmiş durum için computed, yan etkiler için watch ve eylemler için methods arasında bölünebilirdi. Bu bileşenler büyüdükçe, onlarca satır kod arasında kaybolmak, bakım ve yeni ekip üyelerinin sisteme adapte olması açısından bir felakete dönüşürdü.

Composition API Devreye Giriyor

Composition API, kodu seçenek türlerine göre değil, mantıksal endişelere göre organize etmemizi sağlar. Seçenekler yerine fonksiyonlar kullanarak ilgili mantığı bir araya getirebiliriz. Bu API'nin çekirdeği, reaktif ilkelere (ref ve reactive) ve artık this üzerinden erişilen değil, doğrudan vue paketinden içe aktarılan yaşam döngüsü kancalarına (lifecycle hooks) dayanır.

Basit bir sayaç ve selamlama sistemini Options API'den Composition API sözdizimine dönüştürmenin pratik bir örneğine bakalım.

Kod Örneği: Temel Composition

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

// ref ile reaktif durum
const count = ref(0);
const name = ref('Vue Developer');

// Hesaplanmış özellik (Computed property)
const greeting = computed(() => {
  return `Merhaba, ${name.value}! ${count.value} bildiriminiz var.`;
});

// Durumu güncelleme metodu
function increment() {
  count.value++;
}

function updateName(newName) {
  name.value = newName;
}
</script>

<template>
  <div>
    <p>{{ greeting }}</p>
    <button @click="increment">Artır</button>
    <input v-model="name" placeholder="Ad girin" />
  </div>
</template>

Temizliğe dikkat edin. Şablon, <script setup> ile basitleştirilmiştir; bu derleyici makrosu, <script setup> içindeki üst düzey bağlamaları şablonda otomatik olarak kullanılabilir hale getirir. Daha da önemlisi, ilgili mantık (durum ve bu durumu manipüle eden fonksiyonlar) birlikte yer alır, bu da bileşenin okunmasını ve hata ayıklamasını kolaylaştırır.

Composables ile Yeniden Kullanılabilirliği Artırma

Composition API'nin en büyük avantajı, durumlu mantığı ayıklama ve yeniden kullanma yeteneğidir. Options API'de mantığı yeniden kullanmanın geleneksel yolu mixins'ti, ancak bunlar ad çakışmalarından ve veri kaynağının belirsizliğinden muzdaripti. Composition API, yeniden kullanılabilir mantığı kapsülleyen Composables—fonksiyonlar—tanıtır.

Composable, reaktif durumu kapsüllemek ve ortaya çıkarmak için Vue'nun Composition API'sini kullanan bir fonksiyondur. Sadece bir fonksiyon olduğu için net bir girdisi (bağımsız değişkenler) ve çıktısı (döndürülen reaktif değerler) vardır; bu da mixins'in belirsizlik sorunlarını çözer.

Kod Örneği: Composable Oluşturma

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  return { x, y };
}

Böylece, herhangi bir bileşen olay dinleyicilerini veya yaşam döngüsü kancası kodunu çoğaltmadan bu fare izleme mantığını kullanabilir.

<script setup>
import { useMouse } from './useMouse';

const { x, y } = useMouse();
</script>

Sonuç

Vue 3 Composition API sadece sözdizimsel bir değişiklik değildir; geliştiricilerin daha sağlam, ölçeklenebilir ve bakımı kolay uygulamalar oluşturmasını sağlayan bir paradigma değişimidir. Kodun mantıksal olarak gruplandırılmasına ve Composables aracılığıyla mantık ayıklama için güçlü araçlar sağlamasına izin vererek, büyük Vue 2 projelerini rahatsız eden ölçeklenebilirlik sorunlarını ele alır. Orta ve ileri düzey geliştiriciler için Composition API'yi ustalaşmak artık bir seçenek değil; modern frontend mühendisliğinin ön saflarında kalmak için şarttır.