Composables: Yeniden Kullanılabilir Composition İşlevleri
Tepkisel mantığı use ile başlayan composable işlevlere çıkarın, bunları bileşenler arasında paylaşın ve mixin'lerden farklarını öğrenin.
Composables: Yeniden Kullanılabilir Composition İşlevleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Birleştirilebilir İşlevler Nedir?
Birleştirilebilir işlev, durum taşıyan mantığı kapsüllemek ve yeniden kullanmak için Composition API kancalarını kullanan bir işlevdir. Bunlar mixin'lerin Composition API'deki karşılığıdır; ancak ad alanı çakışmaları veya gizli bağımlılıklar içermezler.
Temel Birleştirilebilir İşlev
Reaktif mantığı use ile başlayan bir işleve ayırın. Tıpkı setup() gibi ref, computed, watch ve yaşam döngüsü kancalarını kullanabilir.
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Yaşam Döngüsü Kancaları Kullanan Birleştirilebilir İşlev
Birleştirilebilir işlevler yaşam döngüsü kancaları kaydedebilir. Kancalar, onu çağıran bileşene göre çalışır.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Asenkron Birleştirilebilir İşlev (useFetch)
Birleştirilebilir işlevler asenkron veri çekme işlemlerinde çok kullanışlıdır; yükleniyor/hata/veri düzenini kapsüller.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Parametre Olarak Ref Kabul Etme
Birleştirilebilir işlevler, MaybeRef<T> (= T | Ref<T>) ve değere erişmek için unref() kullanarak bağımsız değişken olarak düz değerleri veya ref'leri kabul edebilir.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Birleştirilebilir İşlevler ve Mixin'ler
Mixin'ler, özelliklerin kaynağı açıkça belli olmadan bileşene özellikler ekler. Birleştirilebilir işlevler açıktır — birleştirilebilir işlevin dönüş değerinden tam olarak ne sağladığını görürsünüz. Birden çok birleştirilebilir işlev, ad çakışması olmadan kullanılabilir.
Bileşenler Arasında Durum Paylaşma
Birleştirilebilir işlev kendi içinde ref() çağırırsa, onu çağıran her bileşen kendi durumuna sahip olur. Durumu bileşenler arasında paylaşmak için ref() işlevini modül kapsamındayken (birleştirilebilir işlevin dışında) çağırın.
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Birleştirilebilir İşlev Kütüphaneleri
VueUse (vueuse.org), useLocalStorage, useFetch, useDark, useIntersectionObserver ve daha birçok kullanıma hazır birleştirilebilir işlev sağlar. Sıfırdan yazmadan önce her zaman VueUse'a göz atın.
Birleştirilebilir İşlevleri Sınama
Birleştirilebilir işlevleri, onları küçük bir sınama bileşeni içinde çağırarak veya @vue/test-utils mountedApp düzenini kullanarak sınayın. Vitest, Vue'nun reaktivite sistemiyle iyi bütünleşir.
Birleştirilebilir İşlevleri Adlandırma Kuralları
Her zaman use ile önekleyin (useAuth, useFetch, useMediaQuery). Bunları tek bir soruna odaklı tutun. Birbiriyle ilgisiz çok fazla iş yapan birleştirilebilir işlevlerden kaçının.
Birleştirilebilir İşlevleri Düzenleme
composables/ klasörü oluşturun. Her birleştirilebilir işlev için bir dosya kullanın. Dizin dosyası, tüm birleştirilebilir işlevleri yeniden dışa aktarır. Bu düzen, React projelerindeki özel kancaların düzenini yansıtır.
Hızlı Kontrol
Birleştirilebilir işlevlerin Vue mixin'lerine göre temel avantajı nedir?
Özet: Vue Birleştirilebilir İşlevleri
Birleştirilebilir işlev, Composition API kancalarını çağıran ve use öneki taşıyan bir işlevdir. Modül düzeyinde ref kullanmadığınız sürece her çağıran kendi bağımsız durumuna sahip olur. MaybeRef + unref ile ref'leri veya değerleri kabul edin. Yaşam döngüsü kancalarını birleştirilebilir işlevlerin içinde kaydedin. Kendi işlevinizi yazmadan önce VueUse'a göz atın. Açık dönüş değerleri, mixin tarzı ad alanı kirliliğini önler.
Sıkça Sorulan Sorular
“Composables: Yeniden Kullanılabilir Composition İşlevleri” dersi ücretsiz mi?
Evet — “Composables: Yeniden Kullanılabilir Composition İşlevleri” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Composables: Yeniden Kullanılabilir Composition İşlevleri” dersinde ne öğreneceğim?
Tepkisel mantığı use ile başlayan composable işlevlere çıkarın, bunları bileşenler arasında paylaşın ve mixin'lerden farklarını öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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 4. dersidir.
“Composables: Yeniden Kullanılabilir Composition İşlevleri” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- ref() ve reactive()
- computed() ve watch()
- setup() İşlevi ve script setup
- Composables: Yeniden Kullanılabilir Composition İşlevleri