0Pricing
Vue Academy · Lektion

VueUse: Die Composable-Bibliothek

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver – praxisnaher Einsatz von VueUse

VueUse: Die Composable-Bibliothek ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist VueUse

VueUse (@vueuse/core) ist eine umfangreiche Sammlung fertiger Komposables für häufige Aufgaben – etwa Speicher, Sensoren, Browser-APIs und mehr. Dadurch müssen Sie diese Funktionen nicht selbst neu entwickeln.

npm install @vueuse/core

useLocalStorage für dauerhafte Speicherung

useLocalStorage gibt eine mit localStorage synchronisierte Ref zurück. Änderungen bleiben automatisch über das Neuladen hinaus erhalten, wobei die Serialisierung für Sie übernommen wird.

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

Reaktiv und dauerhaft

Die zurückgegebene Ref verhält sich wie jede andere – binden Sie sie mit v-model –, aber ihr Wert bleibt nach dem Aktualisieren der Seite erhalten, weil VueUse ihn in den Speicher schreibt.

<input v-model="name" />

useMouse für die Cursorposition

useMouse verfolgt den Mauszeiger und gibt reaktive x- und y-Refs zurück, die bei der Bewegung des Cursors aktualisiert werden.

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

Mauskoordinaten anzeigen

Binden Sie die Refs im Template. Sie werden bei jeder mousemove-Aktion aktualisiert, ohne dass Sie Listener selbst verbinden müssen.

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

useWindowSize für Abmessungen

useWindowSize stellt reaktive width- und height-Refs bereit, die bei einer Größenänderung aktualisiert werden – ideal für responsive Logik im Script.

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

Responsive Logik

Kombinieren Sie die Fenstergröße mit einem berechneten Wert, um Layoutentscheidungen reaktiv zu steuern.

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

useIntersectionObserver für Lazy Loading

useIntersectionObserver informiert Sie, wenn ein Element in den sichtbaren Bereich gelangt – die Grundlage für das verzögerte Laden von Bildern oder für Infinite Scrolling.

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

Bei Sichtbarkeit auslösen

Übergeben Sie eine Template-Ref und einen Callback, der mit Intersection-Einträgen aufgerufen wird. Laden Sie das Bild oder rufen Sie weitere Daten ab, sobald das Ziel sichtbar ist.

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

Automatische Bereinigung

Ein großer Vorteil: VueUse-Komposables registrieren und entfernen ihre eigenen Listener und Observer beim Aushängen. Sie erhalten die korrekte Bereinigung kostenlos.

Warum VueUse verwenden

VueUse unterstützt Tree Shaking, ist gut getestet und auf TypeScript ausgerichtet. Für häufige Anforderungen – Speicher, Sensoren, Netzwerk und Zeit – sollten Sie zuerst zu VueUse greifen, bevor Sie ein eigenes Komposable schreiben.

Kurze Überprüfung

Welches VueUse-Komposable speichert eine Ref dauerhaft in localStorage?

Zusammenfassung

Sie haben VueUse kennengelernt: useLocalStorage (dauerhafter Zustand), useMouse (Cursorposition), useWindowSize (reaktive Abmessungen) und useIntersectionObserver (Auslöser für Lazy Loading) – alle mit automatischer Bereinigung und Tree Shaking.

Häufig gestellte Fragen

Ist die Lektion „VueUse: Die Composable-Bibliothek“ kostenlos?

Ja — der vollständige Text von „VueUse: Die Composable-Bibliothek“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „VueUse: Die Composable-Bibliothek“?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver – praxisnaher Einsatz von VueUse Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „VueUse: Die Composable-Bibliothek“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Was ein gutes Composable ausmacht
  2. useCounter: Ein einfaches Composable
  3. useFetch: Asynchrones Composable für Daten
  4. VueUse: Die Composable-Bibliothek
← Zurück zu Vue Academy