VueUse: biblioteka composable
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — praktyczne zastosowanie VueUse.
VueUse: biblioteka composable to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Czym jest VueUse
VueUse (@vueuse/core) to duży zbiór gotowych composable do typowych zadań — obsługi pamięci, czujników, API przeglądarki i nie tylko. Dzięki niemu nie trzeba tworzyć tych rozwiązań od podstaw.
npm install @vueuse/coreuseLocalStorage do utrwalania danych
useLocalStorage zwraca ref zsynchronizowany z localStorage. Zmiany są automatycznie zachowywane między przeładowaniami, a serializacja odbywa się za Pana/Panią.
import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorageReaktywność i utrwalanie
Zwrócony ref zachowuje się jak każdy inny — można powiązać go z v-model — ale jego wartość przetrwa odświeżenie strony, ponieważ VueUse zapisuje ją w pamięci trwałej.
<input v-model="name" />useMouse do pozycji kursora
useMouse śledzi wskaźnik i zwraca reaktywne refy x oraz y, które aktualizują się podczas ruchu kursora.
import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();Wyświetlanie współrzędnych myszy
Należy powiązać refy w szablonie; będą aktualizować się przy każdym zdarzeniu mousemove bez konieczności samodzielnego konfigurowania nasłuchiwania.
<p>Cursor: {{ x }}, {{ y }}</p>useWindowSize do wymiarów
useWindowSize udostępnia reaktywne refy width i height, aktualizowane przy zmianie rozmiaru — świetnie nadają się do obsługi responsywnej logiki w skrypcie.
import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();Logika responsywna
Można połączyć rozmiar okna z wartością obliczaną, aby reaktywnie sterować decyzjami dotyczącymi układu.
import { computed } from "vue";
const isMobile = computed(() => width.value < 768);useIntersectionObserver do leniwego ładowania
useIntersectionObserver informuje, gdy element pojawi się w obszarze widocznym — jest podstawą leniwego ładowania obrazów lub nieskończonego przewijania.
import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);Uruchamianie po pojawieniu się elementu
Należy przekazać ref z szablonu oraz funkcję zwrotną wywoływaną wraz z wpisami przecięcia. Gdy element docelowy stanie się widoczny, można załadować obraz lub pobrać więcej danych.
useIntersectionObserver(target, ([entry]) => {
if (entry.isIntersecting) loadImage();
});Automatyczne sprzątanie
Dużą zaletą jest to, że composable VueUse rejestrują i usuwają własne nasłuchiwania oraz obserwatory podczas odmontowania. Poprawne sprzątanie otrzymuje się bez dodatkowej pracy.
Dlaczego warto używać VueUse
VueUse obsługuje tree-shaking, jest dobrze przetestowany i tworzony przede wszystkim z myślą o TypeScript. W przypadku typowych potrzeb — pamięci, czujników, sieci czy czasu — przed napisaniem własnego composable warto sięgnąć po VueUse.
Szybkie sprawdzenie
Który composable VueUse utrwala ref w localStorage?
Podsumowanie
Omówiliśmy VueUse: useLocalStorage (stan trwały), useMouse (pozycja kursora), useWindowSize (reaktywne wymiary) oraz useIntersectionObserver (wyzwalacz leniwego ładowania), wszystkie z automatycznym sprzątaniem i tree-shakingiem.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „VueUse: biblioteka composable” jest bezpłatna?
Tak — pełny tekst „VueUse: biblioteka composable” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „VueUse: biblioteka composable”?
useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — praktyczne zastosowanie VueUse. Ćwiczysz Vue 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ąć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue 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 „VueUse: biblioteka composable”?
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 Vue Academy?
Tak. Każda lekcja Vue 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
- Co wyróżnia dobry composable
- useCounter: prosty composable
- useFetch: composable do danych asynchronicznych
- VueUse: biblioteka composable