Eine einfache Anleitung zu berechneten Eigenschaften von Vue.js

Vue.js bietet eine leistungsstarke Funktion namens berechnete Eigenschaften, mit der Sie Berechnungen durchführen und Daten aus dem Status Ihrer Komponente ableiten können. Berechnete Eigenschaften sind besonders nützlich, wenn Sie komplexe Berechnungen oder Transformationen basierend auf reaktiven Dateneigenschaften durchführen und gleichzeitig Ihren Vorlagencode sauber und lesbar halten möchten.

In diesem Handbuch erkunden wir die Grundlagen berechneter Eigenschaften in Vue.js, wie sie sich von Methoden unterscheiden und wie Sie sie effektiv in Ihren Vue-Komponenten verwenden.

Was sind berechnete Eigenschaften?

Berechnete Eigenschaften sind Funktionen, die innerhalb des berechneten-Objekts einer Vue-Komponente definiert sind. Im Gegensatz zu Methoden werden berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert. Dies bedeutet, dass sie nur dann neu ausgewertet werden, wenn sich eine ihrer Abhängigkeiten ändert, was sie für aufwändige Vorgänge effizienter macht.

Hier ist ein einfaches Beispiel einer Vue-Komponente, die eine berechnete Eigenschaft verwendet:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

In diesem Beispiel kombiniert die berechnete Eigenschaft fullName die Dateneigenschaften firstName und lastName, um einen vollständigen Namen zurückzugeben. Da fullName eine berechnete Eigenschaft ist, wird sie automatisch aktualisiert, wenn sich firstName oder lastName ändert.

Berechnete Eigenschaften vs. Methoden

Auf den ersten Blick ähneln berechnete Eigenschaften möglicherweise Methoden, da beide zum Ausführen von Berechnungen und Zurückgeben von Ergebnissen verwendet werden können. Es gibt jedoch einen wesentlichen Unterschied zwischen den beiden:

• Methoden: Methoden werden bei jedem Aufruf neu ausgewertet. Das bedeutet, dass sie keine Ergebnisse zwischenspeichern und weniger effizient sein können, wenn sie rechenintensiv sind.
• Berechnete Eigenschaften: Berechnete Eigenschaften werden basierend auf ihren Abhängigkeiten zwischengespeichert und nur dann neu ausgewertet, wenn sich diese Abhängigkeiten ändern. Dies macht sie effizienter für Szenarien mit aufwändigen Berechnungen.

Wenn wir beispielsweise für die Berechnung des vollständigen Namens eine Methode anstelle einer berechneten Eigenschaft verwenden würden, würde diese bei jedem Rendern der Vorlage aufgerufen. Bei einer berechneten Eigenschaft wird sie nur dann neu berechnet, wenn sich eine ihrer Abhängigkeiten ändert.

Verwenden von Gettern und Settern mit berechneten Eigenschaften

Berechnete Eigenschaften können auch Getter und Setter haben. Standardmäßig haben berechnete Eigenschaften nur einen Getter, aber Sie können einen Setter hinzufügen, um Datenaktualisierungen zu verarbeiten.

Dies ist ein Beispiel für eine berechnete Eigenschaft mit einem Getter und einem Setter:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

In diesem Beispiel verfügt die berechnete Eigenschaft fullName über einen Getter, der den vollständigen Namen zurückgibt, und einen Setter, der den eingegebenen Namen aufteilt und die Dateneigenschaften firstName und lastName aktualisiert.

Reaktivität in berechneten Eigenschaften

Berechnete Eigenschaften sind reaktiv und werden automatisch aktualisiert, wenn sich ihre Abhängigkeiten ändern. Wenn Sie beispielsweise den Wert von Vorname oder Nachname ändern, wird die berechnete Eigenschaft VollständigerName automatisch aktualisiert, um den neuen Wert widerzuspiegeln.

Hier ist ein Beispiel, das diese Reaktivität demonstriert:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

In diesem Beispiel wird beim Klicken auf die Schaltfläche Vorname in "Jane" geändert und die berechnete Eigenschaft VollständigerName automatisch auf "Jane Doe" aktualisiert.

Bewährte Methoden für die Verwendung berechneter Eigenschaften

• Verwenden Sie berechnete Eigenschaften für aufwändige Berechnungen, die auf reaktiven Daten basieren.
• Halten Sie berechnete Eigenschaften einfach und konzentrieren Sie sich auf die Rückgabewerte.
• Vermeiden Sie Nebeneffekte innerhalb berechneter Eigenschaften; verwenden Sie stattdessen Methoden, wenn Sie Aktionen ausführen müssen.
• Verwenden Sie Getter und Setter für berechnete Eigenschaften, wenn Sie sowohl das Lesen als auch das Schreiben von Daten verarbeiten müssen.
• Stellen Sie sicher, dass die Abhängigkeiten der berechneten Eigenschaften reaktiv sind. Andernfalls werden sie nicht korrekt aktualisiert.

Abschluss

Berechnete Eigenschaften sind eine leistungsstarke Funktion von Vue.js, mit der Sie Ihren Code sauber, effizient und einfach zu warten halten können. Sie helfen Ihnen, Daten aus anderen reaktiven Eigenschaften abzuleiten und automatisch zu aktualisieren, wenn sich Abhängigkeiten ändern. Wenn Sie verstehen, wie Sie berechnete Eigenschaften effektiv nutzen, können Sie robustere und leistungsfähigere Vue.js-Anwendungen erstellen.