Vue 3'ü Kilidini Açmak: Composition API'ye Kapsamlı Bir Rehber

Yıllar boyunca Options API, Vue.js uygulamalarında mantığı düzenlemenin standart yoluydu. Küçük ve orta ölçekli bileşenler için etkili olsa da, karmaşık projelerde genellikle "option soup"a yol açtı; ilgili mantık data, methods ve watchers özellikleri arasında dağılmıştı. Composition API ise, seçenekler bildirmek yerine içe aktarılan işlevler kullanarak Vue bileşenleri oluşturmanıza olanak tanıyan bir API setidir.

Bu yazıda, Composition API'nin büyük ölçekli uygulamalar için neden bir oyun değiştirici olduğunu, reaktif ilkelere nasıl faydalanabileceğinizi ve iş akışınızı geçirmenize yardımcı olacak pratik kod örneklerini keşfedeceğiz.

Neden Composition API?

Composition API'nin arkasındaki temel motivasyon mantık yeniden kullanımı ve organizasyonudur. Options API'de, kullanıcı kimlik doğrulaması, form doğrulaması ve API çağrılarını işleyen karmaşık bir bileşeniniz varsa, tek bir özelliği anlamak için kodun farklı bölümleri arasında geçiş yapmak zorunda kalabilirsiniz. Composition API, ilgili mantığı aynı yerde tutmanıza olanak tanıyarak bu sorunu çözer.

Ayrıca, Composition API standart JavaScript'in üzerine inşa edilmiştir. TypeScript çıkarımı için daha iyi destek sağlar ve geliştiricilerin yeniden kullanılabilir mantığı özel composables (composables) içine ayırmalarına olanak tanır; bu, React Hooks'a benzer ancak daha sezgisel reaktivite takibi ile Vue'nun cevabıdır.

Temel Kavramlar: Ref ve Reactive

Composition API'yi kullanmak için iki ana reaktivite ilkesini anlamak gerekir: ref ve reactive. Her ikisi de durumu reaktif hale getirirken, farklı kullanım durumlarına hizmet ederler.

ref, ilkel değerleri (dizeler, sayılar, booleanlar) veya nesneleri tutmak için kullanılır. Bir ref'i şablonda eriştiğinizde, Vue onu otomatik olarak çözer (unwrap). Ancak JavaScript'te değere .value özelliği üzerinden erişmeniz gerekir.

reactive, bir nesnenin reaktif bir proxy'sini oluşturur. Karmaşık veri yapıları için idealdir ancak orijinal nesne referansını değiştiremez. Genellikle nesneler ve diziler için tercih edilir.

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

// Tek bir ilkel değer için ref kullanımı
const count = ref(0);

// Bir nesne için reactive kullanımı
const user = reactive({
  name: 'Alice',
  email: 'alice@example.com',
  role: 'developer'
});

function increment() {
  // Ref'i değiştirmek için .value erişimi
  count.value++;
}

function changeRole(newRole) {
  // Reactive nesneler için doğrudan erişim
  user.role = newRole;
}
</script>

<template>
  <div>
    <p>Sayı: {{ count }}</p>
    <p>Kullanıcı Rolü: {{ user.role }}</p>
    <button @click="increment">Artır</button>
  </div>
</template>

Composables: Mantığı Ayıklama

Composition API'nin en güçlü özelliklerinden biri composables oluşturma yeteneğidir. Bir composable, durumlu mantığı kapsüllemek ve yeniden kullanmak için Vue'nun Composition API'lerini kullanan basit bir işlevdir. Bu, "dosya başına bir sorumluluk" mimarisini teşvik eder.

Örneğin, API çağrı mantığını bileşeninizin içine karıştırmak yerine, bir useFetch composables oluşturabilirsiniz.

useFetch.js
import { ref, onMounted } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(true);

  onMounted(async () => {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Ağ yanıtı iyi değildi');
      data.value = await response.json();
    } catch (e) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  });

  return { data, error, loading };
}

Şimdi, bileşeninizde bu mantığı basitçe içe aktarabilir ve kullanabilirsiniz:

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

const { data, error, loading } = useFetch('/api/users');
</script>

Benimseme İçin En İyi Uygulamalar

Göç ederken veya yeni projelere başlarken, bu en iyi uygulamaları göz önünde bulundurun:

1. <script setup> kullanın: Bu derleyici makrosu, Composition API'yi kullanmak için daha öz bir sözdizimi sağlar ve setup işlevinden değişkenleri döndürme ihtiyacını ortadan kaldırır.
2. Composables'ları Odaklı Tutun: Her composable, form durumunu işleme, API çağrıları yapma veya sürükle-bırak olaylarını yönetme gibi tek bir sorumluluğu ele almalıdır.
3. Varsayılan Olarak Refs Kullanın: Reactive kullanışlı olsa da, refs tamamen yeniden atanabildikleri için daha çok yönlüdür. Derinlemesine özellikleri değiştirdiğiniz karmaşık nesneler için reactive kullanın.

Sonuç

Vue 3 Composition API sadece yeni bir sözdizimi değil; bileşen mimarisi hakkında nasıl düşündüğümüzde temel bir değişimdir. Daha iyi kod organizasyonu, geliştirilmiş TypeScript desteği ve composables aracılığıyla sağlam mantık yeniden kullanımını sağlayarak geliştiricilerin ölçeklenebilir, sürdürülebilir ve yüksek performanslı uygulamalar oluşturmasına olanak tanır.

Mevcut bir Vue 2 uygulamasını geçiş yapıyor olun veya Vue 3 ile sıfırdan başlıyor olun, Composition API'yi ustalaşmak, frontend geliştirme yolculuğunuzda temel bir adımdır. Bugün karmaşık bir bileşeni yeniden yapılandırarak başlayın ve netlik ile yapıdaki farkı deneyimleyin.