Composables: wielokrotnego użytku funkcje Composition
Proszę wydzielać reaktywną logikę do funkcji composable z prefiksem use, współdzielić je między komponentami oraz zrozumieć, czym różnią się od mixinów.
Composables: wielokrotnego użytku funkcje Composition to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są funkcje composable?
Composable to funkcja, która używa haków Composition API do hermetyzowania i ponownego wykorzystywania logiki ze stanem. Jest odpowiednikiem mixinów w Composition API, ale bez konfliktów nazw i ukrytych zależności.
Podstawowa funkcja composable
Należy wydzielić logikę reaktywną do funkcji, której nazwa zaczyna się od use. Może ona używać ref, computed, watch oraz haków cyklu życia — tak jak setup().
// 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);Composable z hakami cyklu życia
Funkcje composable mogą rejestrować haki cyklu życia. Haki są uruchamiane względem komponentu, który wywołuje funkcję composable.
// 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 };
}Composable z operacjami asynchronicznymi (useFetch)
Funkcje composable doskonale sprawdzają się przy asynchronicznym pobieraniu danych — hermetyzują schemat loading/error/data.
// 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 };
}Przyjmowanie refów jako parametrów
Funkcje composable mogą przyjmować jako argumenty zwykłe wartości albo refy, używając MaybeRef<T> (= T | Ref<T>) i unref() do uzyskania wartości.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Funkcje composable a mixiny
Mixiny wstrzykują właściwości do komponentu bez wyraźnego wskazania ich źródła. Funkcje composable są jawne — z ich wartości zwracanej dokładnie wynika, co zapewniają. Można używać wielu funkcji composable bez konfliktów nazw.
Udostępnianie stanu między komponentami
Jeśli funkcja composable wywołuje ref() wewnątrz siebie, każdy komponent, który ją wywołuje, otrzymuje własny stan. Aby udostępnić stan między komponentami, należy wywołać ref() na poziomie modułu (poza funkcją composable).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Biblioteki funkcji composable
VueUse (vueuse.org) udostępnia ponad 200 gotowych do użycia funkcji composable: useLocalStorage, useFetch, useDark, useIntersectionObserver i wiele innych. Przed napisaniem własnego rozwiązania od zera zawsze należy sprawdzić VueUse.
Testowanie funkcji composable
Funkcje composable należy testować, wywołując je wewnątrz małego komponentu testowego albo używając wzorca mountedApp z @vue/test-utils. Vitest dobrze integruje się z systemem reaktywności Vue.
Konwencje nazewnictwa funkcji composable
Nazwa powinna zawsze zaczynać się od use (useAuth, useFetch, useMediaQuery). Funkcje composable powinny koncentrować się na jednym zagadnieniu. Należy unikać funkcji composable, które wykonują zbyt wiele niepowiązanych zadań.
Organizacja funkcji composable
Należy utworzyć folder composables/. Każda funkcja composable powinna znajdować się w osobnym pliku. Plik indeksu powinien ponownie eksportować wszystkie funkcje composable. Odzwierciedla to sposób organizacji custom hooks w projektach React.
Szybkie sprawdzenie
Jaka jest kluczowa przewaga funkcji composable nad mixinami Vue?
Podsumowanie: funkcje composable Vue
Composable to funkcja z prefiksem use, która wywołuje haki Composition API. Każdy wywołujący ją komponent otrzymuje niezależny stan, chyba że używane są refy na poziomie modułu. Refy lub wartości można przyjmować za pomocą MaybeRef + unref. Haki cyklu życia należy rejestrować wewnątrz funkcji composable. Przed napisaniem własnego rozwiązania należy sprawdzić VueUse. Jawne wartości zwracane zapobiegają zanieczyszczaniu przestrzeni nazw typowemu dla mixinów.
Często zadawane pytania
Czy lekcja „Composables: wielokrotnego użytku funkcje Composition” jest bezpłatna?
Tak — pełny tekst „Composables: wielokrotnego użytku funkcje Composition” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Composables: wielokrotnego użytku funkcje Composition”?
Proszę wydzielać reaktywną logikę do funkcji composable z prefiksem use, współdzielić je między komponentami oraz zrozumieć, czym różnią się od mixinów. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Composables: wielokrotnego użytku funkcje Composition”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- ref() i reactive()
- computed() i watch()
- Funkcja setup() i script setup
- Composables: wielokrotnego użytku funkcje Composition