Import og brug af composables i script setup
Import af composables, brug af tredjeparts-composables fra VueUse, organisering af imports.
Import og brug af composables i script setup er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Composables og script setup
Composables er funktioner, der pakker reaktiv logik til genbrug. Med <script setup> er det lige så enkelt at bruge dem som at importere dem og kalde dem på øverste niveau.
Importér på øverste niveau
Kald altid en composable på øverste niveau i <script setup> – ikke inde i en betingelse, løkke eller indlejret funktion. Det sikrer, at Vue registrerer dens reaktivitet og livscyklus-hooks korrekt.
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>Hvorfor øverste niveau er vigtigt
Composables registrerer ofte livscyklus-hooks som onMounted eller opsætter watchere. De skal køre under komponentens opsætning, hvilket kun sker, hvis du kalder composable-funktionen synkront på øverste niveau.
Udpak det, du har brug for
En composable returnerer et objekt med reaktive værdier og funktioner. Udpak kun det, komponenten bruger, og omdøb det for at undgå navnekonflikter, når du kalder den samme composable to gange.
<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>Mød VueUse
VueUse er et populært bibliotek med færdige composables. I stedet for selv at skrive almindelig logik kan du importere en testet composable. Installér det én gang, og importér derefter det, du har brug for.
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>useLocalStorage i praksis
useLocalStorage returnerer en ref, der er synkroniseret med localStorage. Ændr ref'en, og browserens lager opdateres; genindlæs siden, så bevares værdien.
<template>
<input v-model="name" />
<p>Saved: {{ name }}</p>
</template>useMouse til reaktive koordinater
useMouse sporer markørens position som reaktive refs. Den tilføjer og fjerner hændelseslytteren for dig, så du aldrig selv skal håndtere oprydning.
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>{{ x }}, {{ y }}</p>
</template>Composables kan kombineres
En composable kan kalde andre composables. Denne lagdeling er kernen i Composition API – opbyg små dele, og kombinér dem til større funktioner.
import { useMouse } from '@vueuse/core'
export function useMouseDistance() {
const { x, y } = useMouse()
const distance = computed(() => Math.hypot(x.value, y.value))
return { distance }
}await på øverste niveau
<script setup> understøtter await direkte på øverste niveau. Komponenten bliver en asynkron setup, og rammeværket kan sætte gengivelsen på pause, indtil det returnerede promise er fuldført.
<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>Suspense med asynkron setup
En komponent, der bruger await på øverste niveau, skal omsluttes af en <Suspense>-grænse af den overordnede komponent. Suspense viser reserveindhold, indtil den asynkrone opsætning er færdig.
<template>
<Suspense>
<AsyncUser />
<template #fallback>Loading...</template>
</Suspense>
</template>Bedste praksis
- Navngiv composables med præfikset
use. - Kald dem kun på øverste niveau.
- Returnér refs (eller en
reactive, der er pakket ind itoRefs). - Foretræk VueUse til almindelige behov, før du skriver din egen løsning.
Hurtigt tjek
Bekræft, at du har forstået composables.
Opsummering
Du har lært at bruge composables:
- Importér og kald dem på øverste niveau i
<script setup>. - Udpak og omdøb det, du har brug for.
- VueUse tilbyder færdige composables som
useLocalStorageoguseMouse. awaitpå øverste niveau gør opsætningen asynkron og bruges sammen med<Suspense>.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Import og brug af composables i script setup” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Import og brug af composables i script setup”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Import og brug af composables i script setup”?
Import af composables, brug af tredjeparts-composables fra VueUse, organisering af imports. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Import og brug af composables i script setup”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Introduktion til script setup
- defineProps og defineEmits
- defineExpose og useAttrs
- Import og brug af composables i script setup