Composition API
Vue.js’de Composition API, bileşenlerin mantığını daha modüler ve yeniden kullanılabilir bir şekilde organize etmeyi sağlayan modern bir yaklaşımdır. Options API’de veriler, yöntemler ve hesaplanan özellikler ayrı bölümlerde yer alırken, Composition API tüm bu mantığı setup() fonksiyonu içinde merkezi olarak toplar. Bu, özellikle büyük ve karmaşık projelerde bileşenler arası mantık paylaşımını ve kodun sürdürülebilirliğini artırır.
Composition API ile ref ve reactive kullanarak reaktif veri yönetimi, computed ile hesaplanan özellikler ve watch ile değişiklikleri izleme gibi temel Vue.js kavramları etkin bir şekilde uygulanabilir. Ayrıca algoritmaların, veri yapılarının ve OOP prensiplerinin yönetilmesi daha kontrollü ve test edilebilir hale gelir. Bu yapı, yazılım geliştirme ve sistem mimarisi bağlamında daha ölçeklenebilir ve performanslı uygulamalar geliştirmeyi mümkün kılar.
Bu eğitimde, Composition API kullanarak reaktif durum yönetimi, yeniden kullanılabilir fonksiyonlar (composables), performans optimizasyonları ve sık yapılan hatalardan kaçınma yöntemleri öğreneceksiniz. Örnekler, gerçek Vue.js projelerinde uygulanabilir çözümler sunacak şekilde tasarlanmıştır ve ileri düzey Vue.js geliştiriciliği için gerekli becerileri kazandıracaktır.
Temel Örnek
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
const sayac = ref(0)
const artir = () => {
sayac.value++
}
const ciftSayac = computed(() => sayac.value * 2)
return {
sayac,
artir,
ciftSayac
}
},
template: ` <div> <h1>Sayac: {{ sayac }}</h1> <h2>Çift Sayac: {{ ciftSayac }}</h2> <button @click="artir">Artır</button> </div>
`
}
createApp(App).mount('#app')Bu temel örnekte setup() fonksiyonu, Composition API’nin merkezini oluşturur. sayac değişkeni ref ile reaktif hale getirilmiştir, böylece değişiklikler otomatik olarak template’e yansır. artir fonksiyonu durumu günceller, ciftSayac ise computed ile türetilmiş bir değer sağlar. Bu değer, sayac değiştikçe otomatik olarak güncellenir. Ref ve reactive farklarını anlamak ve ref değerlerine .value ile erişmek kritik öneme sahiptir. Bu yapı, modülerlik ve test edilebilirlik açısından ileri düzey Vue.js projelerinde büyük avantaj sağlar.
Pratik Örnek
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
const durum = reactive({
gorevler: [],
yeniGorev: ''
})
const gorevEkle = () => {
if (durum.yeniGorev.trim() !== '') {
durum.gorevler.push({ metin: durum.yeniGorev, tamamlandi: false })
durum.yeniGorev = ''
}
}
watch(() => durum.gorevler.length, (yeniDeger, eskiDeger) => {
console.log(`Görev sayısı değişti: ${eskiDeger} → ${yeniDeger}`)
})
const gorevSil = (index) => {
durum.gorevler.splice(index, 1)
}
return {
durum,
gorevEkle,
gorevSil
}
},
template: ` <div> <h1>Görev Listesi</h1> <input v-model="durum.yeniGorev" placeholder="Görev ekle" /> <button @click="gorevEkle">Ekle</button> <ul> <li v-for="(gorev, index) in durum.gorevler" :key="index">
{{ gorev.metin }} <button @click="gorevSil(index)">Sil</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')Bu örnekte reactive kullanılarak tüm durum objesi reaktif hale getirilmiştir. gorevEkle ve gorevSil fonksiyonları array üzerinde işlemler yapar ve basit doğrulamalar içerir. watch, gorevler.length değişimlerini gözlemleyerek yan etkiler üretir. Bu yapı, OOP prensipleri ve modülerlik ile birlikte güvenli durum yönetimi sağlar. Vue.js’de DOM manipülasyonundan kaçınmak ve watchers’ı gerektiğinde temizlemek, bellek sızıntılarını önlemek için önemlidir.
Composition API kullanırken en iyi uygulamalar arasında ref ve reactive seçiminin doğru yapılması, computed ve watch kullanımı, setup() içinde hata yönetimi ve Vue Devtools ile debug yapılması yer alır. Performans için hesaplamaları optimize etmek, gereksiz watch veya computed çağrılarını önlemek ve veri doğrulama ile güvenliği sağlamak kritik önemdedir.
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Basit reaktif değişken oluşturur | const sayac = ref(0) |
| reactive | Reaktif obje veya array oluşturur | const durum = reactive({ isim: '', yas: 0 }) |
| computed | Reaktif hesaplanmış özellik | const cift = computed(() => sayac.value * 2) |
| watch | Veri değişikliklerini gözlemler | watch(() => durum.gorevler.length, (yeni) => console.log(yeni)) |
| setup | Composition API’nin merkezi fonksiyonu | setup() { const veri = ref(0); return { veri } } |
Composition API, reaktivite, hesaplanmış özellikler ve izleyiciler kullanarak ölçeklenebilir ve yeniden kullanılabilir bileşenler oluşturmayı sağlar. Bir sonraki adımlar composables oluşturmak, Pinia ile durum yönetimi ve async setup ile suspense kullanımı gibi ileri düzey konulara geçmektir. Vue.js resmi dokümantasyonu ve açık kaynak projeler, Composition API’yi derinlemesine öğrenmek için önemli kaynaklardır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek