Von Vue berechnete Eigenschaften

Vorwort:

Im Allgemeinen werden Attribute in data eingefügt, aber einige Attribute müssen möglicherweise nach einigen logischen Berechnungen abgerufen werden, sodass wir solche Attribute in berechnete Attribute umwandeln können.

Zum Beispiel:

<div id="Beispiel">
  {{ message.split('').reverse().join('') }}
</div>

An diesem Punkt ist die Vorlage nicht mehr nur eine einfache deklarative Logik. Sie müssen eine Weile darauf schauen, um zu erkennen, dass wir hier die umgekehrte Zeichenfolge der Variablen message anzeigen möchten. Noch schwieriger wird die Handhabung, wenn Sie diese umgedrehte Zeichenfolge an mehreren Stellen in Ihrer Vorlage einfügen möchten.

Sie sollten daher für jede komplexe Logik berechnete Eigenschaften verwenden.

1. Grundlegende Beispiele

<div id="app">
  <h2>Gesamtpreis: {{totalPrice}}</h2>
</div>
<Skript>
  const vm = neuer Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo",
      Bücher:
        {Name: 'Die Geschichte der Drei Königreiche', Preis: 30},
        {Name: 'Der Traum der Roten Kammer', Preis: 40},
        {name: 'Reise nach Westen', Preis: 50},
        {Name: 'Water Margin', Preis: 60},
      ],
    },
    berechnet: {
      // Berechneter Eigenschaftsgetter
      Gesamtpreis: Funktion (){
          lass Ergebnis = 0;
          // `this` bezieht sich auf die VM-Instanz für (let book of this.books) {
            Ergebnis += Buchpreis;
          }
          Ergebnis zurückgeben
      }
    }
  })
</Skript>

Ergebnis: Gesamtpreis: 180

Hier deklarieren wir eine berechnete Eigenschaft totalPrice . Anschließend wird der Gesamtpreis des Buches mithilfe einer For-Schleife berechnet. Attribute, die berechnet werden müssen, werden in computed geschrieben.

Attribute haben im Allgemeinen zwei Methoden: get und set . get ruft den Attributwert ab und set legt den Attributwert fest. Der Standardwert in computed ist get attribute. Unser vm.totalPrice hängt von books.price ab. Wenn sich der Preis des Buches ändert, ändert sich auch das berechnete Attribut totalPrice dynamisch.

2. Berechneter Eigenschaftscache vs. Methode

Möglicherweise haben Sie bemerkt, dass wir denselben Effekt erzielen können, indem wir Methoden in Ausdrücken aufrufen:

<div id="app">
  <h2>Gesamtpreis: {{getAllPrice()}}</h2>
</div>
<Skript>
  const vm = neuer Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo",
      Bücher:
        {Name: 'Die Geschichte der Drei Königreiche', Preis: 30},
        {Name: 'Der Traum der Roten Kammer', Preis: 40},
        {name: 'Reise nach Westen', Preis: 50},
        {Name: 'Water Margin', Preis: 60},
      ],
    },
    Methoden: {
      getAllPrice: Funktion () {
        lass Ergebnis = 0;
        // `this` bezieht sich auf die VM-Instanz für (let book of this.books) {
          Ergebnis += Buchpreis;
        }
        Ergebnis zurückgeben
      }
    },
  })
</Skript>

Wir können dieselbe Funktion als Methode statt als berechnete Eigenschaft definieren. Das Endergebnis ist in beiden Fällen genau dasselbe. Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren reaktiven Abhängigkeiten zwischengespeichert werden. Eine Neubewertung erfolgt nur dann, wenn sich die zugehörigen reaktiven Abhängigkeiten ändern. Dies bedeutet, dass, solange sich books nicht geändert haben, ein mehrmaliger Zugriff auf totalPrice sofort das zuvor berechnete Ergebnis zurückgibt, ohne dass die Funktion erneut ausgeführt werden muss.

Die berechneten Eigenschaften werden also zwischengespeichert

Warum brauchen wir Caching? Angenommen, wir haben eine rechenintensive Eigenschaft A , die das Durchlaufen eines riesigen Arrays und die Durchführung zahlreicher Berechnungen erfordert. Wir haben dann möglicherweise andere berechnete Eigenschaften, die von A abhängen. Ohne Caching würden wir getter von A zwangsläufig mehrmals ausführen! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden.

3. Berechnete Eigenschaftssetter

Berechnete Eigenschaften haben standardmäßig nur getter , Sie können bei Bedarf aber auch einen setter angeben:

berechnet: {
  Gesamtpreis:
    erhalten: Funktion () {
      lass Ergebnis = 0;
      // `this` bezieht sich auf die VM-Instanz für (let book of this.books) {
        Ergebnis += Buchpreis;
      }
      Ergebnis zurückgeben
    },
    set: Funktion (neuerWert) {
      für (let Buch von diesem.books){
        Buchpreis += 10
      }
    }
  }
}

Hier haben wir eine set -Methode hinzugefügt. Beim Ausführen von vm.totalPrice=[...] wird setter aufgerufen und der Gesamtpreis des Buches ändert sich entsprechend. Normalerweise wird set jedoch nicht verwendet.

Dies ist das Ende dieses Artikels über computed Vue -Eigenschaften. Weitere verwandte Inhalte zu Vue computed Eigenschaften finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!