Vue Academy · Lektion

setup()-Funktion und reaktive Variablen

Der Einstiegspunkt setup(), ref() für primitive Werte, reactive() für Objekte, Rückgabe von Werten.

setup()-Funktion und reaktive Variablen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Der Einstiegspunkt setup()

Die Composition API befindet sich innerhalb einer speziellen Komponentenoption namens setup(). Sie wird einmal ausgeführt, bevor die Komponente erstellt wird, und dient dazu, reaktiven Zustand und Funktionen zu deklarieren.

Alles, was Sie aus setup() return zurückgeben, wird im Template verfügbar.

Reaktiven Zustand mit ref erstellen

ref() verpackt einen einzelnen Wert — eine Zahl, einen String, einen booleschen Wert oder sogar ein Objekt — in einen reaktiven Container. Der eigentliche Wert befindet sich in der Eigenschaft .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

Reaktive Objekte mit reactive erstellen

reactive() nimmt ein einfaches Objekt entgegen und gibt einen tief reaktiven Proxy zurück. Sie greifen direkt auf dessen Eigenschaften zu — es gibt kein .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Zustand an das Template zurückgeben

Alles, was aus setup() als Objekt zurückgegeben wird, wird zu einer Template-Bindung. Hier werden sowohl count als auch user bereitgestellt.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Automatisches Unwrapping im Template

In JavaScript haben Sie count.value geschrieben. Im Template schreiben Sie einfach count. Vue entfernt automatisch die Verpackung von Refs auf oberster Ebene, sodass Sie im Template nie .value eingeben müssen.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Funktionen hinzufügen

In setup() definierte Funktionen können reaktiven Zustand lesen und verändern. Denken Sie daran: Innerhalb von JavaScript verwenden Sie für Refs weiterhin .value.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Im Template verknüpfen

Geben Sie die Funktion zurück und binden Sie sie an ein Ereignis. Wenn Sie auf die Schaltfläche klicken, wird increment aufgerufen, der Ref verändert und Vue rendert die Ansicht neu.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

Kein this-Schlüsselwort erforderlich

Innerhalb von setup() gibt es kein this. Sie arbeiten direkt mit den Variablen, die Sie deklariert haben. Dadurch lässt sich der Code leichter nachvollziehen und besser mit TypeScript verwenden.

Wenn Sie versuchen, this in setup() zu verwenden, erhalten Sie nicht die Komponenteninstanz.

setup wird vor der Erstellung ausgeführt

setup() wird sehr früh ausgeführt — vor created und bevor die Komponenteninstanz vollständig eingerichtet ist. Deshalb ist this nicht verfügbar und Sie können hier noch nicht auf das DOM zugreifen.

Argumente von setup(): props und context

setup(props, context) erhält die aufgelösten props als erstes Argument und ein Kontextobjekt als zweites. Der Kontext stellt attrs, slots, emit und expose bereit.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Eine vollständige Mini-Komponente

Hier sehen Sie alles zusammen: einen Ref, ein reaktives Objekt, eine Funktion und die zurückgegebenen Bindungen.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Wissenscheck

Stellen Sie sicher, dass Sie setup() und reaktive Variablen verstehen.

Zusammenfassung

Sie haben die Grundlagen der Composition API gelernt:

setup() wird einmal vor der Erstellung ausgeführt und gibt Template-Bindungen zurück.
ref() verpackt einen Wert — verwenden Sie .value in JavaScript.
reactive() verpackt ein Objekt — greifen Sie direkt auf die Eigenschaften zu.
Templates führen bei Refs automatisch ein Unwrapping durch, sodass Sie dort .value weglassen.
Innerhalb von setup() gibt es kein this.

Häufig gestellte Fragen

Ist die Lektion „setup()-Funktion und reaktive Variablen“ kostenlos?

Ja — der vollständige Text von „setup()-Funktion und reaktive Variablen“ 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 „setup()-Funktion und reaktive Variablen“?

Der Einstiegspunkt setup(), ref() für primitive Werte, reactive() für Objekte, Rückgabe von Werten. 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 2 von 4.

Wie lange dauert die Lektion „setup()-Funktion und reaktive Variablen“?

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

Warum die Composition API?
setup()-Funktion und reaktive Variablen
ref vs. reactive: Wann Sie welches verwenden
Computed und Watch in der Composition API

← Zurück zu Vue Academy