Vue Academy · Lektion

Composables in script setup importieren und verwenden

Composables importieren, VueUse-Composables von Drittanbietern verwenden, Imports organisieren.

Composables in script setup importieren und verwenden 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.

Composables und script setup

Composables sind Funktionen, die reaktive Logik zur Wiederverwendung bündeln. Bei der Verwendung von <script setup> genügt es, sie auf der obersten Ebene zu importieren und aufzurufen.

Auf der obersten Ebene importieren

Rufen Sie ein Composable immer auf der obersten Ebene von <script setup> auf – nicht innerhalb einer Bedingung, einer Schleife oder einer verschachtelten Funktion. So stellt Vue sicher, dass Reaktivität und Lifecycle-Hooks korrekt registriert werden.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

Warum die oberste Ebene wichtig ist

Composables registrieren häufig Lifecycle-Hooks wie onMounted oder richten Watcher ein. Diese müssen während des Component-Setups ausgeführt werden, was nur funktioniert, wenn Sie das Composable synchron auf der obersten Ebene aufrufen.

Nur das Benötigte destrukturieren

Ein Composable gibt ein Objekt mit reaktiven Werten und Funktionen zurück. Destrukturieren Sie nur, was die Komponente verwendet, und vergeben Sie bei Bedarf neue Namen, um Kollisionen zu vermeiden, wenn Sie dasselbe Composable zweimal aufrufen.

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

VueUse kennenlernen

VueUse ist eine beliebte Bibliothek mit fertigen Composables. Anstatt häufig benötigte Logik selbst zu schreiben, importieren Sie ein getestetes Composable. Installieren Sie die Bibliothek einmal und importieren Sie, was Sie benötigen.

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage in Aktion

useLocalStorage gibt eine mit localStorage synchronisierte Ref zurück. Ändern Sie die Ref, wird der Browserspeicher aktualisiert; laden Sie die Seite neu, bleibt der Wert erhalten.

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

Reaktive Koordinaten mit useMouse

useMouse verfolgt die Position des Zeigers als reaktive Refs. Es fügt den Event-Listener für Sie hinzu und entfernt ihn wieder, sodass Sie die Bereinigung nie manuell verwalten müssen.

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

Composables kombinieren

Ein Composable kann andere Composables aufrufen. Diese Schichtung bildet den Kern der Composition API: Bauen Sie kleine Bausteine und kombinieren Sie sie zu größeren Funktionen.

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

Top-Level-await

<script setup> unterstützt await direkt auf der obersten Ebene. Die Komponente wird dadurch zu einem asynchronen Setup, und das Framework kann das Rendern anhalten, bis das Promise aufgelöst ist.

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Suspense mit asynchronem Setup

Eine Komponente, die Top-Level-await verwendet, muss vom Parent in eine <Suspense>-Grenze eingeschlossen werden. Suspense zeigt bis zum Abschluss des asynchronen Setups einen Fallback-Inhalt an.

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Bewährte Vorgehensweisen

Benennen Sie Composables mit dem Präfix use.
Rufen Sie sie ausschließlich auf der obersten Ebene auf.
Geben Sie Refs zurück (oder ein mit toRefs umschlossenes reactive).
Bevorzugen Sie für häufige Anforderungen VueUse, bevor Sie etwas Eigenes schreiben.

Schnelltest

Überprüfen Sie Ihr Verständnis von Composables.

Zusammenfassung

Sie haben gelernt, Composables zu verwenden:

Importieren Sie sie und rufen Sie sie auf der obersten Ebene von <script setup> auf.
Destrukturieren Sie, was Sie benötigen, und vergeben Sie bei Bedarf neue Namen.
VueUse bietet fertige Composables wie useLocalStorage und useMouse.
Top-Level-await macht das Setup asynchron und wird zusammen mit <Suspense> verwendet.

Häufig gestellte Fragen

Ist die Lektion „Composables in script setup importieren und verwenden“ kostenlos?

Ja — der vollständige Text von „Composables in script setup importieren und verwenden“ 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 „Composables in script setup importieren und verwenden“?

Composables importieren, VueUse-Composables von Drittanbietern verwenden, Imports organisieren. 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 „Composables in script setup importieren und verwenden“?

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

Einführung in script setup
defineProps und defineEmits
defineExpose und useAttrs
Composables in script setup importieren und verwenden

← Zurück zu Vue Academy