Vue Academy · Lektion

Berechnete Eigenschaften

Leiten Sie mit computed-Eigenschaften zwischengespeicherte reaktive Werte ab

Berechnete Eigenschaften ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. 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 3 Lektionen.

Was ist eine berechnete Eigenschaft?

Eine berechnete Eigenschaft leitet einen Wert aus anderen reaktiven Daten ab.

Sie wird nur neu berechnet, wenn sich ihre Abhängigkeiten ändern
In Templates wird sie wie eine normale Eigenschaft gelesen
Sie hält Templates übersichtlich, indem sie die Logik in JS verlagert

Ein computed definieren

Verwenden Sie in der Composition API die Funktion computed.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Ein computed im Template verwenden

Auf ein computed wird wie auf eine data-Eigenschaft zugegriffen, ohne Klammern.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

Computed oder Methoden

Eine Methode gibt ebenfalls einen Wert zurück. Warum also computed verwenden?

Computed wird anhand seiner Abhängigkeiten zwischengespeichert
Eine Methode wird bei jedem Aufruf innerhalb eines Render-Vorgangs ausgeführt

Computed ist für abgeleitete Werte, die wiederholt verwendet werden, effizienter.

Caching in der Praxis

Ein computed wird nur dann erneut ausgeführt, wenn sich eine Abhängigkeit ändert. Wenn Sie es mehrfach lesen, wird das zwischengespeicherte Ergebnis wiederverwendet.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Methoden werden bei jedem Aufruf ausgeführt

Im Gegensatz dazu berechnet eine Methode den Wert bei jedem Aufruf neu, selbst wenn sich die Eingaben nicht geändert haben.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed in der Options API

Die Options API deklariert berechnete Eigenschaften in einem computed-Block.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Computed-Getter

Standardmäßig ist ein computed schreibgeschützt: Es besitzt nur einen Getter.

Der Getter wird ausgeführt, um den Wert zu erzeugen, sobald sich Abhängigkeiten ändern.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Computed-Setter

Sie können ein computed beschreibbar machen, indem Sie sowohl eine get- als auch eine set-Funktion bereitstellen.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Den Setter verwenden

Wenn Sie einem beschreibbaren computed einen Wert zuweisen, wird sein Setter ausgeführt.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Wann computed verwendet wird

Verwenden Sie computed, wenn Sie einen Wert benötigen, der aus einem reaktiven Zustand abgeleitet ist.

Eine Liste filtern oder sortieren
Daten für die Anzeige formatieren
Mehrere Werte zu einem Wert kombinieren

Verwenden Sie Watcher (in der nächsten Lektion), wenn Sie stattdessen mit Seiteneffekten auf Änderungen reagieren müssen.

Kurztest

Testen Sie Ihr Verständnis von berechneten Eigenschaften.

Zusammenfassung: Berechnete Eigenschaften

Sie haben abgeleiteten Zustand kennengelernt:

computed leitet Werte aus reaktiven Daten ab
Es wird zwischengespeichert und nur neu berechnet, wenn sich Abhängigkeiten ändern
Methoden werden bei jedem Aufruf ausgeführt, computed nicht
Computed kann einen Getter und optional einen Setter besitzen

Als Nächstes: Watcher und tiefe Reaktivität.

Häufig gestellte Fragen

Ist die Lektion „Berechnete Eigenschaften“ kostenlos?

Ja — der vollständige Text von „Berechnete Eigenschaften“ 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 3 Lektionen.

Was lerne ich in „Berechnete Eigenschaften“?

Leiten Sie mit computed-Eigenschaften zwischengespeicherte reaktive Werte ab 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 3.

Wie lange dauert die Lektion „Berechnete Eigenschaften“?

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

← Zurück zu Vue Academy