Technical Tutorials

Vue 3'teki Composition API'nin tanıtımı, çerçeveyi Options API'nin kısıtlamalarından daha esnek, mantık odaklı bir yaklaşıma taşıyarak bir paradigm shift yarattı. Geliştiriciler data ve methods yerine temel composable işlevlerini benimsemiş olsa da, Vue 3'ün gücünü gerçekten açığa çıkarmak, karmaşık durum mantığı ve bileşenler arası yeniden kullanılabilirlik için gelişmiş desenlere derinlemesine inmeyi gerektirir.

Bu yazıda, karmaşık durum bağımlılıklarını yöneten, yan etkileri işleyen ve sorumlulukların temiz bir ayrımını koruyan yeniden kullanılabilir composables oluşturmaya yönelik sofistike teknikleri keşfedeceğiz. Bu desenler, Vue uygulamalarını etkili bir şekilde ölçeklendirmek isteyen orta ve ileri düzey geliştiriciler için hayati önem taşır.

Temel: Composable Dönüş Değerlerini Anlamak

Composable, temelde reaktif durumu ve mantığı kapsülleyen bir işlevdir. Gelişmiş kullanımdaki anahtar, dönüş değerini nasıl yapılandırdığınızdır. Basit reaktif nesneler döndürmek yaygın olsa da, gelişmiş composables genellikle reaktif referanslar, hesaplanmış özellikler ve emir kipi (imperative) yöntemlerinin bir kombinasyonunu döndürür.

Örneğin, sayfalandırılmış bir API isteğini yöneten bir composable düşünün. Sadece veriyi döndürmek yerine, yükleme durumunu, hata yönetimini ve istekleri tetiklemek için yöntemleri de dışa aktarmalıdır. Bu, herhangi bir bileşene iskelet kodu (boilerplate) eklemeden yerleştirilebilen mantığın kendi kendine yeten bir birimini oluşturur.

Desen 1: Hesaplanmış Durum ile Reaktif Bağımlılıklar

Composition API'nin en güçlü yönlerinden biri, durumu reaktif olarak türetme yeteneğidir. Karmaşık durumlarla uğraşırken birden fazla watch ifadesine güvenmek yönetilemez hale gelebilir. Bunun yerine, bağımlılıkları değiştiğinde otomatik olarak güncellenecek türetilmiş durumlar oluşturmak için Vue'nun computed işlevinden yararlanın.

Örneğin, belirli alanların kullanıcının rolüne göre yalnızca görüneceği bir kullanıcı profili formunu yöneten bir composable hayal edin. Bu durumları manuel olarak senkronize etmek yerine, görünürlük koşullarını dinamik olarak hesaplayabilirsiniz.

import { ref, computed } from 'vue';

export function useAdvancedForm(userRole) {
  const formData = ref({
    name: '',
    bio: '',
    showPremiumFields: false
  });

  // Rol bazlı görünürlüğü otomatik olarak türet
  const isPremiumUser = computed(() => userRole.value === 'premium');

  const showPremiumFields = computed(() => {
    return isPremiumUser.value || formData.value.showPremiumFields;
  });

  return {
    formData,
    showPremiumFields,
    updateField: (key, value) => {
      formData.value[key] = value;
    }
  };
}

Desen 2: Yaşam Döngüsü Kancaları ile Yan Etkilerin Kapsüllenmesi

Composables yalnızca durum için değildir; bileşen yaşam döngüsüyle etkileşime giren yan etkileri kapsüllemek için de idealdir. Composable içinde onMounted, onUnmounted ve onUpdated gibi yaşam döngüsü kancalarını kullanarak etkinlik dinleyicileri, zamanlayıcılar veya WebSocket bağlantıları gibi kaynakları temiz bir şekilde yönetebilirsiniz.

Bu, bir WebSocket bağlantısını yöneten bir composable örneğidir. Bileşen yüklendiğinde bağlantının kurulmasını ve bellek sızıntılarını önlemek için ayrılırken temiz bir şekilde kapatılmasını sağlar.

import { ref, onMounted, onUnmounted } from 'vue';

export function useWebSocket(url) {
  const messages = ref([]);
  let socket = null;

  onMounted(() => {
    socket = new WebSocket(url);

    socket.onmessage = (event) => {
      messages.value.push(JSON.parse(event.data));
    };

    socket.onerror = (error) => {
      console.error('WebSocket hatası:', error);
    };
  });

  onUnmounted(() => {
    if (socket) {
      socket.close();
    }
  });

  const sendMessage = (data) => {
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send(JSON.stringify(data));
    }
  };

  return {
    messages,
    sendMessage
  };
}

Desen 3: Yapılandırma İçin Fabrika İşlevleri

Maksimum yeniden kullanılabilirlik için composables, yapılandırma seçeneklerini bağımsız değişken olarak kabul etmelidir. Bu, genel bir işlevi özelleştirilebilir bir fabrikaya dönüştürür. Yapılandırma nesneleri için reactive kullanarak bileşenlerin, çalışma zamanında composable'ın davranışını dinamik olarak ayarlamasına izin verebilirsiniz.

Bu fabrikaları tasarlarken, yapılandırma daha sonra değiştirilirse reaktiviteyi korumak için varsayılan değerlerin reactive kullanılarak ayarlandığından emin olun. Bu desen, uygulamanın farklı bölümlerinin farklı varsayılan değerlere ihtiyaç duyabileceği UI kütüphaneleri veya veri çekme yardımcı programları için özellikle faydalıdır.

Gelişmiş Composables için En İyi Uygulamalar

Tek Sorumluluk: Her composable'ı belirli bir mantık alanına odaklı tutun. Bir composable çok büyürse, onu daha küçük, yardımcı composable'lara ayırın.
Değişmezlik: Reaktiviteyi bozan şekillerde reaktif durumu doğrudan değiştirmekten kaçının. Değişiklikleri yönetmek için yöntemler veya hesaplanmış özellikler kullanın.
Hata Yönetimi: Composablesınızın içinde her zaman sağlam hata yönetimi ekleyin. Kullanıcı dostu mesajlar görüntüleyebilmeleri için hata durumlarını tüketiciye dışa aktarın.
Dokümantasyon: Composables genellikle ekipler arasında kullanıldığından, beklenen girdiler ve çıktılar konusunda net dokümantasyon, sürdürülebilirlik için hayati önem taşır.

Sonuç

Gelişmiş Composition API desenlerini ustalıkla öğrenmek, geliştiricilerin Vue 3'te daha temiz, daha sürdürülebilir ve yüksek ölçüde yeniden kullanılabilir kod yazmasını sağlar. Reaktif bağımlılıklardan yararlanarak, yan etkileri kapsülleyerek ve fabrika işlevlerini kullanarak, zarif bir şekilde ölçeklenen karmaşık uygulamalar oluşturabilirsiniz. Vue ile geliştirmeye devam ettikçe, mantığı composables'a soyutlamaya ve bileşenlerin ince kalmasını ve yalnızca sunuma odaklanmasını sağlamaya odaklanın.