Vue Academy · Lektion

VueUse: Composable-biblioteket

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver – praktisk användning av VueUse.

Lektion 4 av 413 steg

VueUse: Composable-biblioteket är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad är VueUse

VueUse (@vueuse/core) är en stor samling färdiga composables för vanliga uppgifter – lagring, sensorer, webbläsar-API:er och mycket mer. Det besparar er arbetet med att uppfinna dem på nytt.

npm install @vueuse/core

useLocalStorage för beständig lagring

useLocalStorage returnerar en ref som synkroniseras med localStorage. Ändringar sparas automatiskt mellan omladdningar, och serialiseringen hanteras åt er.

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

Reaktivt och beständigt

Den returnerade refen fungerar som vilken annan ref som helst – bind den med v-model – men värdet överlever sidomladdningar eftersom VueUse skriver till lagringen.

<input v-model="name" />

useMouse för pekarens position

useMouse följer pekaren och returnerar reaktiva refs för x och y som uppdateras när markören flyttas.

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

Visa muskoordinater

Bind refs i mallen. De uppdateras vid varje mousemove utan att ni behöver koppla in några lyssnare.

<p>Cursor: {{ x }}, {{ y }}</p>

useWindowSize för dimensioner

useWindowSize ger reaktiva refs för width och height som uppdateras vid storleksändringar – perfekt för responsiv logik i scriptet.

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

Responsiv logik

Kombinera fönsterstorleken med en computed för att reagera på förändringar när ni bestämmer layouten.

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

useIntersectionObserver för lazy loading

useIntersectionObserver meddelar när ett element kommer in i visningsområdet – grunden för lazy loading av bilder eller oändlig rullning.

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

Utlös vid synlighet

Skicka med en template-ref och en callback-funktion som körs med intersection-poster. Läs in bilden eller hämta mer data när målet blir synligt.

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

Automatisk rensning

En stor fördel är att VueUse-composables registrerar och tar bort sina egna lyssnare och observatörer när komponenten avmonteras. Ni får korrekt rensning utan extra arbete.

Varför använda VueUse

Det kan tree-shakas, är vältestat och TypeScript-first. För vanliga behov – lagring, sensorer, nätverk och tid – bör ni använda VueUse innan ni skriver ett eget composable.

Snabb kontroll

Vilket VueUse-composable sparar en ref i localStorage?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har gått igenom VueUse: useLocalStorage (beständigt tillstånd), useMouse (pekarens position), useWindowSize (reaktiva dimensioner) och useIntersectionObserver (utlösare för lazy loading), alla med automatisk rensning och tree-shaking.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”VueUse: Composable-biblioteket” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”VueUse: Composable-biblioteket”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”VueUse: Composable-biblioteket”?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver – praktisk användning av VueUse. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”VueUse: Composable-biblioteket”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy