Die berechnete Funktion in Vue3: erleichtert die Verwendung berechneter Eigenschaften

Die berechnete Funktion in Vue3: erleichtert die Verwendung berechneter Eigenschaften

Vue.js ist derzeit eines der beliebtesten JavaScript-Frameworks. Aufgrund seiner Vorlagensyntax, Datenbindung, Komponentisierung und anderen Funktionen wird Vue.js immer häufiger in der Front-End-Entwicklung eingesetzt. In Vue.js ist die berechnete Funktion eine sehr praktische Funktion. Sie kann uns helfen, den Code zu vereinfachen, wiederholte Berechnungen zu reduzieren und die Leistung und Lesbarkeit des Codes zu verbessern. Für die Vue.js 3.x-Version werden in diesem Artikel die Verwendung berechneter Funktionen und ihre Vorteile ausführlich vorgestellt.

1. Die Definition und grundlegende Verwendung der berechneten Funktion

Die berechnete Funktion ist eine sehr praktische Funktion in Vue.js, die uns helfen kann, Werte automatisch zu berechnen und Ergebnisse basierend auf in Vorlagen verwendeten Ausdrücken zurückzugeben. Im Gegensatz zur Methodenmethode kann die berechnete Funktion nicht nur definierte Methoden aufrufen, sondern auch Werte direkt aus Datenattributen abrufen. Die berechnete Funktion wird nur dann neu berechnet, wenn sich der Wert des von ihr abhängigen Attributs ändert.

In der Version 3.x von Vue.js können wir berechnete Eigenschaften definieren, indem wir der Komponente ein berechnetes Objekt hinzufügen. In einer Komponente, die wir beispielsweise den Gesamtpreis von Waren berechnen müssen, lautet der Code wie folgt:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      }
    }
  }
</script>

Im obigen Code definieren wir ein berechnetes Objekt, das eine berechnete Eigenschaft von totalPrice enthält. In der Vorlage können wir {{totalPrice}} direkt verwenden, um den Gesamtpreis des Produkts anzuzeigen. Zu diesem Zeitpunkt berechnet totalPrice automatisch das Produkt aus Preis und Menge und gibt das Ergebnis an die Vorlage zurück.

2. Eigenschaften der berechneten Funktion

1. Berechnete Eigenschaften werden zwischengespeichert

In Vue.js haben berechnete Funktionen Caching-Eigenschaften. Das heißt, wenn sich die Daten, auf denen die berechnete Methode basiert, nicht geändert haben, gibt die berechnete Methode das zwischengespeicherte Ergebnis direkt zurück, anstatt eine Neuberechnung durchzuführen. Dies erspart wiederholte Berechnungen und verbessert die Codeleistung. Beispielsweise können wir den obigen Code wie folgt ändern:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
    <p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      },
      totalPriceNoCache() {
        return this.price * this.amount + Math.random();
      }
    }
  }
</script>

Im obigen Code haben wir eine neue berechnete Eigenschaft „totalPriceNoCache“ hinzugefügt. Da wir eine Zufallszahl verwenden, um die Berechnungsergebnisse zu beeinflussen, werden die Ergebnisse jedes Mal unterschiedlich sein. In der Vorlage können wir sehen, dass „totalPrice“ nur einmal berechnet wird, während „totalPriceNoCache“ jedes Mal neu berechnet wird.

2. Berechnete Eigenschaften können von anderen Eigenschaften abhängen

Das mit der berechneten Methode berechnete Ergebnis kann nicht nur auf den Dateneigenschaften der aktuellen Komponente basieren, sondern auch auf den Dateneigenschaften, berechneten Eigenschaften und Requisiteneigenschaften anderer Komponenten. Vue.js verfolgt diese Abhängigkeiten automatisch und berechnet die Ergebnisse berechneter Methoden neu, wenn sich Abhängigkeiten ändern.

Im Folgenden sehen Sie beispielsweise ein Beispiel, das auf anderen berechneten Eigenschaften basiert:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.discount + this.tax;
      },
      discount() {
        return this.price * 0.8;
      },
      tax() {
        return this.price * 0.1;
      }
    }
  }
</script>

Im obigen Code definieren wir drei berechnete Eigenschaften: Gesamtpreis, Rabatt und Steuer. Unter anderem basiert die Berechnung des Gesamtpreises auf zwei berechneten Attributen: Rabatt und Steuer.

Zusammenfassung

Die berechnete Funktion ist eine sehr praktische Funktion in Vue.js, die uns helfen kann, automatisch Werte zu berechnen und Ergebnisse basierend auf den in Vorlagen verwendeten Ausdrücken zurückzugeben. Im Gegensatz zur Methodenmethode kann die berechnete Funktion nicht nur definierte Methoden aufrufen, sondern auch Werte direkt aus Datenattributen abrufen. Die berechnete Funktion wird nur dann neu berechnet, wenn sich der Wert des von ihr abhängigen Attributs ändert. In der Vue.js 3.x-Version verfügt die berechnete Funktion über die Funktion des Caching, wodurch wiederholte Berechnungen eingespart und die Leistung des Codes verbessert werden können. Gleichzeitig können die Ergebnisse der berechneten Methode auf den Datenattributen, berechneten Attributen und Requisitenattributen anderer Komponenten basieren. Vue.js verfolgt diese Abhängigkeiten automatisch, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonDie berechnete Funktion in Vue3: erleichtert die Verwendung berechneter Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!