Composition API Neden Kullanılır?
Options API'nin sınırlamaları, mantığı yeniden kullanma sorunu, Composition API'nin avantajları.
Composition API Neden Kullanılır?, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Vue ile Kod Yazmanın İki Yolu
Vue 3, bileşen mantığını yazmanız için iki üslup sunar: Seçenekler API'si ve Bileşim API'si. İkisi de aynı sonucu üretir, ancak kodu çok farklı biçimlerde düzenler.
Ödünleşimleri anlamak, doğru aracı seçmenize ve mevcut kod tabanlarını güvenle okumanıza yardımcı olur.
Seçenekler API'si Kodu Nasıl Düzenler
Seçenekler API'si, bir bileşeni sabit bölümlere ayırır: data, computed, methods, watch ve yaşam döngüsü kancaları. Bir özelliğin her parçası farklı bir bölümde bulunur.
Tek bir küçük özellik için dosyanın dört ayrı bloğuna dokunmanız gerekebilir.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}Sorun: Sorumluluklar Dağılıyor
Bir bileşen büyüdüğünde, tek bir sorumluluğa (örneğin bir arama kutusuna) ait mantık data, methods, computed ve watch arasında dağılır. Tek bir özelliği takip etmek için sürekli yukarı ve aşağı kaydırmanız gerekir.
Buna parçalanma sorunu denir.
Bileşim API'si: Özelliğe Göre Gruplama
Bileşim API'si, tek bir mantıksal sorumluluğa ait tüm kodu bir arada tutmanıza olanak tanır. Reaktif state, türetilmiş değerler ve bunları değiştiren işlevler yan yana bulunur.
Yukarıdan aşağıya okuyarak bir özelliğin tamamını tek bir yerde görürsünüz.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Yan Yana
İkinci örneğin count değerini, bundan türetilen doubled değerini ve increment işlevini nasıl bir arada tuttuğuna dikkat edin. Seçenekler API'sinde aynı üç parça üç ayrı bölümde bulunuyordu.
- Seçenekler API'si: seçenek türüne göre düzenlenir
- Bileşim API'si: mantıksal sorumluluğa göre düzenlenir
Mantığı Yeniden Kullanma: Karışımlar (Eski Yöntem)
Bileşim API'sinden önce ana yeniden kullanım aracı karışımlardı. Bir karışım, seçeneklerini bir bileşenle birleştirir.
Ancak karışımların gerçek sorunları vardır: ad çakışmaları, özelliklerin kaynağının belirsiz olması ve karışımlar arasındaki örtük bağımlılıklar.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Mantığı Yeniden Kullanma: Birleştirilebilir İşlevler (Yeni Yöntem)
Birleştirilebilir işlev, reaktivite API'lerini kullanan ve reaktif state döndüren bir işlevdir. Her işlev gibi çağrıldığı için her değerin kaynağı açıkça görülür.
Sihirli birleştirme yok, gizli ad çakışması yok.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Birleştirilebilir İşlev Kullanma
Birleştirilebilir işlevi içe aktarıp çağırmak, count ve increment değerlerinin useCounter işlevinden geldiğini açıkça gösterir. Çakışmaları önlemek için parçalarına ayırma sırasında bunlara yeni adlar bile verebilirsiniz.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Birleştirilebilir İşlevler Neden Karışımlardan Daha İyi
- Açık kaynaklar — her değer, görünür bir işlev çağrısından gelir.
- Ad çakışması yok — parçalarına ayırıp istediğiniz gibi yeniden adlandırabilirsiniz.
- Birleştirilebilir — bir birleştirilebilir işlev, başka bir birleştirilebilir işlevi çağırabilir.
- Türlerle uyumlu — TypeScript, döndürülen türleri otomatik olarak çıkarır.
Daha İyi TypeScript ve Geliştirme Araçları
Bileşim API'si, yalın işlevler ve değişkenlerden oluştuğu için TypeScript, özel araçlar olmadan türleri çıkarabilir. Sürdürülmesi gereken, elle yazılmış bir türü olan this yoktur ve düzenleyiciler doğru otomatik tamamlama önerileri sunar.
Hangisini Ne Zaman Kullanmalı
Bileşim API'si, orta ve büyük bileşenlerde ve yeniden kullanmak istediğiniz her türlü mantıkta öne çıkar. Seçenekler API'si hâlâ tamamen geçerlidir ve çok küçük bileşenlerde okunması kolay olabilir.
Yeni Vue 3 kodlarında genellikle Bileşim API'si tercih edilir; özellikle yakında karşılaşacağınız <script setup> ile.
Hızlı Kontrol
Bileşim API'sinin neden var olduğuyla ilgili öğrendiklerinizi sınayın.
Özet
Bu derste şunları öğrendiniz:
- Seçenekler API'si, kodu seçenek türüne göre düzenler ve bir özelliği bölümler arasında dağıtır.
- Bileşim API'si, kodu mantıksal sorumluluğa göre gruplar.
- Karışımlar mantığı yeniden kullanır, ancak ad çakışmalarına ve gizli kaynaklara neden olur.
- Birleştirilebilir işlevler, reaktif state döndüren yalın işlevlerdir; açık, çakışmasız ve birleştirilebilirdir.
Sıkça Sorulan Sorular
“Composition API Neden Kullanılır?” dersi ücretsiz mi?
Evet — “Composition API Neden Kullanılır?” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Composition API Neden Kullanılır?” dersinde ne öğreneceğim?
Options API'nin sınırlamaları, mantığı yeniden kullanma sorunu, Composition API'nin avantajları. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Composition API Neden Kullanılır?” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Composition API Neden Kullanılır?
- setup() İşlevi ve Reaktif Değişkenler
- ref ve reactive: Hangisi Ne Zaman Kullanılır?
- Composition API'de Computed ve Watch