VueUse: la libreria di composable
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — VueUse in pratica.
VueUse: la libreria di composable è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Che cos'è VueUse
VueUse (@vueuse/core) è una vasta raccolta di composable pronti all'uso per attività comuni: storage, sensori, API del browser e altro. Evita di doverli reinventare.
npm install @vueuse/coreuseLocalStorage per la persistenza
useLocalStorage restituisce un ref sincronizzato con localStorage. Le modifiche persistono automaticamente dopo i ricaricamenti, mentre la serializzazione viene gestita al posto Suo.
import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorageReattivo e persistente
Il ref restituito si comporta come qualsiasi altro ref: lo si può collegare con v-model; tuttavia, il suo valore sopravvive all'aggiornamento della pagina perché VueUse lo scrive nello storage.
<input v-model="name" />useMouse per la posizione del cursore
useMouse tiene traccia del puntatore e restituisce i ref reattivi x e y, che si aggiornano mentre il cursore si sposta.
import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();Visualizzare le coordinate del mouse
Colleghi i ref nel template: si aggiornano a ogni evento mousemove senza dover configurare manualmente i listener.
<p>Cursor: {{ x }}, {{ y }}</p>useWindowSize per le dimensioni
useWindowSize fornisce i ref reattivi width e height, che si aggiornano al ridimensionamento: è ideale per la logica responsive nello script.
import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();Logica responsive
Combini le dimensioni della finestra con un computed per gestire le decisioni di layout in modo reattivo.
import { computed } from "vue";
const isMobile = computed(() => width.value < 768);useIntersectionObserver per il caricamento differito
useIntersectionObserver indica quando un elemento entra nell'area visibile: è la base per il caricamento differito delle immagini o per lo scorrimento infinito.
import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);Attivarsi quando l'elemento è visibile
Passi un ref del template e una callback che viene eseguita con le entry dell'intersezione. Carichi l'immagine o recuperi altri dati quando l'elemento osservato diventa visibile.
useIntersectionObserver(target, ([entry]) => {
if (entry.isIntersecting) loadImage();
});Pulizia automatica
Un grande vantaggio è che i composable di VueUse registrano e rimuovono autonomamente i propri listener e observer durante lo smontaggio. La pulizia corretta viene gestita automaticamente.
Perché usare VueUse
È compatibile con il tree-shaking, è ben testato ed è pensato innanzitutto per TypeScript. Per esigenze comuni, come storage, sensori, rete e tempo, scelga VueUse prima di scrivere un composable personalizzato.
Verifica rapida
Quale composable di VueUse rende persistente un ref in localStorage?
Riepilogo
Ha esplorato VueUse: useLocalStorage (stato persistente), useMouse (posizione del cursore), useWindowSize (dimensioni reattive) e useIntersectionObserver (attivazione del caricamento differito), tutti con pulizia automatica e tree-shaking.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «VueUse: la libreria di composable» è gratuita?
Sì — il testo completo di «VueUse: la libreria di composable» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «VueUse: la libreria di composable»?
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — VueUse in pratica. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «VueUse: la libreria di composable»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Cosa rende valido un composable
- useCounter: un composable semplice
- useFetch: composable per dati asincroni
- VueUse: la libreria di composable