Vue 3 Composition API kullanımı: script setup'tan composable'a

Composition API nedir ve ne zaman tercih edilir?

Composition API, Vue bileşenlerinde durumu ve davranışı, seçeneklere (data, methods, computed) bölmek yerine fonksiyonlarla yazma yoludur. Vue 3 dokümantasyonu, tek dosyalı bileşenlerde (SFC) script setup söz diziminin bu API için en yaygın kullanım olduğunu belirtir. Aynı özelliğe ait durum, hesaplanan değer ve yan etki yan yana durur; bu da büyük bileşenlerde okunabilirlik ve mantığı yeniden kullanma açısından fark yaratır.

Küçük, tek amaçlı bir bileşen için Options API yeterli olabilir; Options API ile Composition API aynı proje içinde birlikte çalışır. Ancak mantığı bileşenler arasında paylaşmak, TypeScript ile çalışmak ya da bileşen büyüdükçe ilgili kodu bir arada tutmak istiyorsanız Composition API daha doğal bir zemin sağlar.

İlk bileşen: script setup, ref ve computed

Bir ürün listesi bileşeni üzerinden temel yapı şöyledir:

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

const products = ref([]) const query = ref('')

const filtered = computed(() => products.value.filter(p => p.name.includes(query.value)) )

onMounted(async () => { const response = await fetch('/api/products') products.value = await response.json() }) </script>

<template> <input v-model="query" placeholder="Ara" /> <ul> <li v-for="p in filtered" :key="p.id">{{ p.name }}</li> </ul> </template>

Burada ref durumu tutar, scriptte .value ile okunur ve yazılır, şablonda ise otomatik açılır. computed, arama veya liste değişince yeniden hesaplanan türetilmiş değerdir. onMounted, bileşen DOM'a yerleştirildikten sonra çalışan yaşam döngüsü kancasıdır. Script setup içinde tanımlanan her şey şablonda doğrudan kullanılabilir; return yazmak gerekmez.

ref mi reactive mi?

Vue dokümantasyonu, durumu tanımlamak için ref kullanmayı önerir. reactive yalnızca nesne ve dizi gibi nesne tipleriyle çalışır, ayrıca bazı sınırlamaları vardır: nesnenin tamamını yeni bir değerle değiştirirseniz reaktif bağ kopar, ve nesnenin özelliklerini ayrı değişkenlere çıkarırsanız (destructuring) bunlar reaktif olmaktan çıkar.

Pratik kural: Tek değerler için ref, birlikte değişen alanlar için de yine ref içinde nesne kullanın. reactive kullanıyorsanız onu tek bir değişken olarak taşıyın, özelliklerini ayrıştırmayın. Fonksiyonlara ve composable'lara ref geçirdiğinizde değerin güncel kalması ve reaktif bağın korunması da refin avantajıdır.

Props, emits ve v-model: bileşenler arası iletişim

Script setup içinde bileşenin dışarıya açtığı arayüzü derleyici makroları tanımlar:

<script setup> const props = defineProps({ title: { type: String, required: true }, selected: Boolean }) const emit = defineEmits(['select']) </script>

props yalnızca okunur: ebeveynin verdiği değeri bileşen içinde doğrudan değiştirmeyin. Değişiklik gerekiyorsa emit ile ebeveyne olay bildirin; ebeveyn durumu günceller. İki yönlü bağlanacak bileşenlerde v-model bu desenin kısayoludur. Props'tan türetilen bir değere ihtiyaç varsa computed kullanın, props'u yerel bir ref'e kopyalayıp kopyadan beslenmeyin; bu, ebeveyn değişince bileşenin eski değerde kalmasına neden olur.

Composable: mantığı bileşenlerden ayırma

Composition API'nin asıl gücü, durumlu mantığı bir fonksiyona çıkarıp birden çok bileşende kullanmaktır. Bu fonksiyonlara Vue dünyasında composable denir ve genellikle use ile başlar:

// composables/useSearchFilter.js import { ref, computed } from 'vue'

export function useSearchFilter(list, field) { const query = ref('') const results = computed(() => list.value.filter(item => item[field].includes(query.value)) ) return { query, results } }

Bileşende kullanım: const { query, results } = useSearchFilter(products, 'name'). Böylece aynı filtre mantığı ürün listesinde, müşteri listesinde ve sipariş listesinde tekrar yazılmadan kullanılır. İyi bir composable tek bir işe odaklanır, girdi olarak ref alır, çıktı olarak ref ve fonksiyon döndürür ve yan etkilerini (zamanlayıcı, olay dinleyici) kendi temizliğini yaparak yönetir.

watch ve watchEffect: değişime tepki vermek

Bir değer değişince yan etki çalıştırmak (API çağrısı, yerel depoya yazma) için watch kullanılır:

watch(query, async (value) => { products.value = await search(value) })

watchEffect ise içinde kullanılan tüm reaktif değerleri otomatik izler ve hepsi için çalışır. Hangi değere tepki verdiğinizi açıkça belirtmek istiyorsanız watch, hızlı ve basit bir bağımlılık takibi istiyorsanız watchEffect uygundur. Türetilmiş veri için watch yerine computed tercih edin: watch yan etki içindir, hesaplama için değil.

Yan etkinin temizliği de composable içinde yapılmalıdır. Örneğin pencere boyutunu izleyen bir composable, dinleyiciyi bileşen kaldırılırken silmelidir:

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

export function useWindowWidth() { const width = ref(window.innerWidth) const update = () => { width.value = window.innerWidth } onMounted(() => window.addEventListener('resize', update)) onUnmounted(() => window.removeEventListener('resize', update)) return { width } }

Temizlik adımı unutulursa bileşen yok olduktan sonra da dinleyici çalışmaya devam eder ve bellek sızıntısına yol açar.

Sık yapılan hatalar

• Scriptte .value yazmayı unutmak: arama yerine arama.value okunmalıdır; şablonda ise gerekmez.
• reactive nesnenin özelliklerini ayrıştırmak: reaktif bağ kopar, değer güncellenmez.
• Composable'ı bileşenin setup bağlamı dışında çağırmak: yaşam döngüsü kancaları ve bağımlılık enjeksiyonu çalışmaz; use fonksiyonlarını bileşenin üst düzeyinde çağırın.
• Props'u doğrudan değiştirmek: tek yönlü veri akışı bozulur.
• Her şeyi tek composable'a yığmak: bir composable bir sorumluluk taşımalıdır.
• Türetilebilecek durumu ayrı ref olarak saklamak: senkron tutma hatalarına yol açar.

Mindset programlarında nerede çalışılır?

Vue.js 3 ve Composition API ile Uygulama Geliştirme eğitimi, reaktivite sisteminden bileşen tasarımına ve iletişimine, kompozisyon fonksiyonlarıyla mantık paylaşımına, durum yönetimi ve yönlendirmeye, formlara ve performans ile test konularına kadar bir Vue uygulamasının bütününü ele alır.

Eğitim, Options API ile çalışmış ve Composition API'ye geçmek isteyen ön yüz geliştiricileri ile JavaScript temeli olan, modern bir çerçeveye geçiş yapan yazılımcılar için uygundur. Kurumsal ekiplerde mevcut bir Vue kod tabanının Composition API'ye geçişinde ortak bir yapı ve composable kuralları oluşturmak için ekibe özel bir program da planlanabilir.