Vue3 berechnete Eigenschaft

Vue3 选项式 APIVue3 Options API

ComputedBerechnete Eigenschaften sind eine Möglichkeit in Vue.js, berechnete Werte zu deklarieren, die von anderen Daten abhängen.

ComputedSie ermöglichen es, komplexe Logik in einer Eigenschaft zu kapseln und sie in Templates wie gewöhnliche Daten zu verwenden.

ComputedDer Wert der Eigenschaft wird automatisch basierend auf ihren abhängigen Daten aktualisiert, wenn sich die Daten ändern,computedwird die Eigenschaft ebenfalls automatisch neu berechnet.

Warum berechnete Eigenschaften verwenden?

  1. Template-Logik vereinfachen
    In Vue kann das Schreiben komplexer Logik direkt in Templates den Code schwer wartbar machen. Durch die Verwendungcomputedberechneter Eigenschaften können Sie komplexe Logik aus Templates herausnehmen und den Code dadurch klarer machen.

  2. Leistungsoptimierung
    ComputedBerechnete Eigenschaften werden basierend auf ihren abhängigen Daten zwischengespeichert. Nur wenn sich die abhängigen Daten änderncomputedwird die Eigenschaft neu berechnet. Dieser Mechanismus vermeidet unnötige Berechnungen und verbessert die Leistung.

  3. Reaktive Aktualisierungen
    Vues reaktives System verfolgt automatischcomputeddie Abhängigkeiten berechneter Eigenschaften und berechnet Werte neu, wenn sich Abhängigkeiten ändern, wodurch sichergestellt wird, dass Daten immer aktuell sind.

Wie verwendet man berechnete Eigenschaften?

In Vue3,computedBerechnete Eigenschaften könnencomputedmit der Funktion definiert werden. Hier ist ein einfaches Beispiel:

Beispiel

import { ref, computed } from 'vue';

export default {
  setup() {
    // Reaktive Daten definieren
    const firstName = ref('John');
    const lastName = ref('Doe');

    // Eine berechnete Eigenschaft definieren
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};

Code-Erklärung

  1. refDie Funktion
    wird verwendet, um reaktive Daten zu erstellen.firstNameundlastNameist eine reaktive Variable.
  2. computedDie Funktion
    wird verwendet, um eine berechnete Eigenschaft zu definieren.fullNameist eincomputedberechnete Eigenschaft, die abhängt vonfirstNameundlastName。
  3. Verwendung in Templates
    Im Template kannst du direkt verwendenfullName, es wird automatisch aktualisiert basierend auffirstNameundlastNamedem Wert von ...

Caching-Mechanismus für berechnete Eigenschaften

ComputedDer Wert einer berechneten Eigenschaft wird zwischengespeichert und nur dann neu berechnet, wenn sich die Daten ändern, von denen sie abhängt. Zum Beispiel:

Beispiel

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // Gibt 0 aus
count.value = 2;
console.log(doubleCount.value); // Gibt 4 aus

In diesem Beispiel,doubleCountDer Wert von ... wird nur dann neu berechnet, wenncountsich ... ändert.

Berechnete Eigenschaft vs. Methoden

ComputedBerechnete Eigenschaften undmethodsMethoden können beide verwendet werden, um Logik zu kapseln, aber sie weisen die folgenden Unterschiede auf:

  1. Zwischenspeicherung
    ComputedBerechnete Eigenschaften speichern Ergebnisse zwischen, währendmethodsMethoden bei jedem Aufruf erneut ausgeführt werden.
  2. Leistung
    Wenn die Logik komplex ist und häufige Aufrufe erfordert, kann die Verwendung voncomputedberechneten Eigenschaften die Leistung verbessern.
  3. Anwendungsfälle
    ComputedBerechnete Eigenschaften eignen sich für Werte, die auf Basis anderer Daten berechnet werden, währendmethodsMethoden sich für das Ausführen von Operationen oder die Behandlung von Ereignissen eignen.

Beispielvergleich:

Beispiel

const count = ref(0);

// Eine berechnete Eigenschaft verwenden
const doubleCount = computed(() => count.value * 2);

// Methoden verwenden
function getDoubleCount() {
  return count.value * 2;
}

Vue3 选项式 APIVue3 Options API

Weitere Erweiterungen