Composables: gjenbrukbare komposisjonsfunksjoner
Trekk ut reaktiv logikk i composable-funksjoner med prefikset use, del dem mellom komponenter, og forstå hvordan de skiller seg fra mixins.
Composables: gjenbrukbare komposisjonsfunksjoner er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva er composables?
En composable er en funksjon som bruker Composition API-hooks til å kapsle inn og gjenbruke tilstandsavhengig logikk. Composables er Composition API-ekvivalenten til mixins – men uten navnekollisjoner eller skjulte avhengigheter.
En enkel composable
Trekk ut reaktiv logikk til en funksjon som begynner med use. Den kan bruke ref, computed, watch og livssyklushooks – akkurat som 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 med livssyklushooks
Composables kan registrere livssyklushooks. Hookene utløses i forhold til komponenten som kaller composable-funksjonen.
// 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 med async (useFetch)
Composables egner seg godt til asynkron datainnhenting – kapsle inn mønsteret for loading, error og 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 };
}Motta refs som parametere
Composables kan motta enten vanlige verdier eller refs som argumenter ved hjelp av MaybeRef<T> (= T | Ref<T>) og unref() for å få tilgang til verdien.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composables kontra mixins
Mixins injiserer egenskaper i komponenten uten et tydelig opphav. Composables er eksplisitte – De ser nøyaktig hva en composable tilbyr, ut fra returverdien. Flere composables kan brukes uten navnekonflikter.
Dele tilstand mellom komponenter
Hvis en composable kaller ref() internt, får hver komponent som kaller composable-funksjonen, sin egen tilstand. For å dele tilstand på tvers av komponenter kaller De ref() på modulnivå (utenfor composable-funksjonen).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Biblioteker med composables
VueUse (vueuse.org) tilbyr over 200 ferdige composables: useLocalStorage, useFetch, useDark, useIntersectionObserver og mange flere. Sjekk alltid VueUse før De skriver noe fra grunnen av.
Teste composables
Test composables ved å kalle dem inne i en liten testkomponent eller ved å bruke mønsteret med @vue/test-utils mountedApp. Vitest integreres godt med Vues reaktivitetssystem.
Navnekonvensjoner for composables
Bruk alltid prefikset use (useAuth, useFetch, useMediaQuery). Hold dem fokusert på ett ansvarsområde. Unngå composables som gjør for mange urelaterte ting.
Organisering av composables
Opprett en composables/-mappe. Bruk én fil per composable. En indeksfil eksporterer alle composables på nytt. Dette gjenspeiler hvordan custom hooks organiseres i React-prosjekter.
Hurtigsjekk
Hva er den viktigste fordelen med composables sammenlignet med Vue-mixins?
Oppsummering: Vue-composables
En composable er en funksjon med prefikset use som kaller Composition API-hooks. Hver som kaller funksjonen, får uavhengig tilstand, med mindre De bruker refs på modulnivå. Motta refs eller verdier med MaybeRef + unref. Registrer livssyklushooks inne i composables. Sjekk VueUse før De skriver en egen løsning. Eksplisitte returverdier hindrer navneforurensning slik den oppstår med mixins.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Composables: gjenbrukbare komposisjonsfunksjoner» gratis?
Ja – hele teksten i «Composables: gjenbrukbare komposisjonsfunksjoner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Composables: gjenbrukbare komposisjonsfunksjoner»?
Trekk ut reaktiv logikk i composable-funksjoner med prefikset use, del dem mellom komponenter, og forstå hvordan de skiller seg fra mixins. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Composables: gjenbrukbare komposisjonsfunksjoner»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- ref() og reactive()
- computed() og watch()
- setup()-funksjonen og script setup
- Composables: gjenbrukbare komposisjonsfunksjoner