Vue Academy · Ders

İyi Bir Composable'ı İyi Yapan Nedir?

Adlandırma kuralı (useName), reaktif durumu kapsülleme, ham değerler yerine ref'ler döndürme.

İyi Bir Composable'ı İyi Yapan Nedir?, 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.

Bir Birleştirilebilir İşlev Nedir

Birleştirilebilir işlev, durum içeren mantığı kapsüllemek ve yeniden kullanmak için Vue Composition API'sini kullanan bir işlevdir. Vue 3'ün mixin'lere verdiği yanıttır; daha temiz, açık ve türlerle uyumludur.

use Ön Eki Kuralı

Kural gereği birleştirilebilir işlevler use ön ekiyle adlandırılır: useCounter, useFetch, useMouse. Bu, işlevin reaktif mantık içerdiğini hemen belirtir.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Ham Değerler Değil, Referanslar Döndürün

Tüketicilerin parçalarına ayırma sırasında reaktif kalması için referanslar (veya reaktif durum) döndürün. count.value döndürmek, hiç güncellenmeyen bir anlık görüntü vermek olur.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Güvenli Parçalara Ayırma

Referansları döndürdüğünüz için tüketici, reaktiviteyi kaybetmeden bunları özgürce parçalara ayırabilir. Her referans kendi reaktif bağlantısını korur.

const { count } = useCounter();
// count stays reactive after destructuring

Tek Sorumluluk

İyi bir birleştirilebilir işlev tek bir iş yapar. useFetch veri getirir; useLocalStorage kalıcı olarak saklar. Küçük ve odaklanmış birleştirilebilir işlevler, daha büyük özellikleri düzenli biçimde oluşturur.

Birleştirilebilir İşlevleri Birleştirme

Birleştirilebilir işlevler başka birleştirilebilir işlevleri çağırarak katmanlı bir mantık oluşturabilir. Bir useUserProfile, dahili olarak useFetch kullanabilir.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Yan Etkileri Temizleme

Birleştirilebilir işlev dinleyiciler, zamanlayıcılar veya abonelikler ekliyorsa, bellek sızıntılarını önlemek için bunları onUnmounted içinde kaldırmalıdır.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Reaktif Bağımsız Değişkenleri Kabul Etme

Birleştirilebilir işlevler girdi olarak referansları veya alıcı işlevleri kabul edebilir ve watch ya da watchEffect ile bunlara tepki verebilir; bu da onları esnek kılar.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Ad Çakışmalarından Kaçınma

Birleştirilebilir işlev çok sayıda değer döndürdüğünde, anlaşılır adlar dışa açın. İki birleştirilebilir işlev de data döndürüyorsa, çakışmaları önlemek için parçalarına ayırırken yeniden adlandırın.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Çerçeveye Uygun Kalma

Yaşam döngüsü kancalarının doğru kaydedilmesi için birleştirilebilir işlevleri setup içinde (veya başka bir birleştirilebilir işlevin içinde) en üst düzeyde, koşullu blokların ya da eşzamansız geri çağrıların içinde olmayacak şekilde eşzamanlı olarak çağırın.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Belgeleme ve Döndürülen Yapı

Tüketicilerin ne aldıklarını bilmeleri için öngörülebilir bir nesne döndürün. Tutarlı bir yapı (durum ve yöntemler), birleştirilebilir işlevlerin öğrenilmesini ve kullanılmasını kolaylaştırır.

return { count, increment, decrement, reset };

Kısa Kontrol

Birleştirilebilir işlev neden ham değerler yerine referanslar döndürmelidir?

Özet

İyi birleştirilebilir işlevlerin özelliklerini öğrendiniz: use ön eki, güvenli parçalarına ayırma için referans döndürme, tek sorumluluk, yan etkileri onUnmounted içinde temizleme ve döndürülen nesnede ad çakışmalarından kaçınma.

Sıkça Sorulan Sorular

“İyi Bir Composable'ı İyi Yapan Nedir?” dersi ücretsiz mi?

Evet — “İyi Bir Composable'ı İyi Yapan Nedir?” 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.

“İyi Bir Composable'ı İyi Yapan Nedir?” dersinde ne öğreneceğim?

Adlandırma kuralı (useName), reaktif durumu kapsülleme, ham değerler yerine ref'ler döndürme. 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.

“İyi Bir Composable'ı İyi Yapan Nedir?” 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

← Vue Academy Sayfasına Dön