Clever Geek Handbook

Vue.js für Anfänger Lektion 7: berechnete Eigenschaften

Heute, in der siebten Lektion des Vue-Kurses, werden wir ĂĽber berechnete Eigenschaften sprechen. Diese Vue-Instanzeigenschaften speichern keine Werte, sondern berechnen sie.









→ Vue.js Anfänger Lektion 1: Instanz Vue

→ Vue.js für Anfänger, Lektion 2: Bindungsattribute

→ Vue.js Anfänger Lektion 3: Bedingtes Rendern

→ Vue.js Anfänger Lektion 4: Listen rendern

→ Vue .js für Anfänger Lektion 5: Ereignisverarbeitung

→ Vue.js Anfänger Lektion 6: Binden von Klassen und Stilen

→ Vue.js Anfänger Lektion 7: berechnete Eigenschaften

→ Vue.js Anfänger Lektion 8: Komponenten



Der Zweck der Lektion



Unser Hauptziel ist es, die durch die Eigenschaften des Datenobjekts brandund productals einzelne Zeile beschriebenen Daten anzuzeigen .



Anfangscode



Hier ist der Code in dem index.htmlTag, mit dem <body>wir beginnen werden: 



<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else :class="{ outOfStock: !inStock }">Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div
        class="color-box"
        v-for="variant in variants"
        :key="variant.variantId"
        :style="{ backgroundColor:variant.variantColor }"
        @mouseover="updateProduct(variant.variantImage)"
      ></div>

      <button
        v-on:click="addToCart"
        :disabled="!inStock"
        :class="{ disabledButton: !inStock }"
      >
        Add to cart
      </button>

      <div class="cart">
        <p>Cart({{ cart }})</p>
      </div>
    </div>
  </div>
</div>


Hier ist der Code main.js: 



var app = new Vue({
    el: '#app',
    data: {
        product: 'Socks',
        brand: 'Vue Mastery',
        image: './assets/vmSocks-green.jpg',
        inStock: true,
        details: ['80% cotton', '20% polyester', 'Gender-neutral'],
        variants: [
          {
            variantId: 2234,
            variantColor: 'green',
            variantImage: './assets/vmSocks-green.jpg'    
          },
          {
            variantId: 2235,
            variantColor: 'blue',
            variantImage: './assets/vmSocks-blue.jpg' 
          }
        ],
        cart: 0
    },
    methods: {
      addToCart() {
        this.cart += 1
      },
      updateProduct(variantImage) {
        this.image = variantImage
      }
    }
})


Beachten Sie, dass dem Datenobjekt eine neue Eigenschaft mit dem Namen hinzugefĂĽgt wurde brand.



Aufgabe



Wir möchten, dass das, was in brandund in gespeichert ist, productin einer Zeile zusammengefasst wird. Mit anderen Worten, wir müssen den <h1>Text im Tag anzeigen Vue Mastery Socks, nicht nur Socks. Um dieses Problem zu lösen, müssen Sie sich fragen, wie Sie zwei in einer Vue-Instanz gespeicherte Zeichenfolgenwerte verketten können.



Die Lösung des Problems



Wir werden berechnete Eigenschaften verwenden, um dieses Problem zu lösen. Da diese Eigenschaften keine Werte speichern, sondern diese berechnen, fügen wir dem Optionsobjekt, das beim Instanziieren von Vue verwendet wird computed, eine Eigenschaft hinzu und erstellen eine berechnete Eigenschaft mit dem Namen title: 



computed: {
  title() {
    return this.brand + ' ' + this.product;
  }
}


Wir glauben, dass alles sehr einfach und klar angeordnet ist. Wenn die Methode aufgerufen wird title(), fĂĽhrt sie eine Zeichenfolgenverkettung durch brandund gibt productdann die resultierende neue Zeichenfolge zurĂĽck.



Jetzt mĂĽssen wir es nur noch titleim Tag <h1>unserer Seite anzeigen .



Jetzt sieht dieser Tag so aus: 



<h1>{{ product }}</h1>


Und jetzt machen wir es so: 



<h1>{{ title }}</h1>


Werfen wir einen Blick auf die Seite und überprüfen die Funktionalität dessen, was wir gerade getan haben.





Der Seitentitel hat sich geändert.



Wie Sie sehen, wird der Titel angezeigtVue Mastery Socks, was bedeutet, dass wir alles richtig gemacht haben.



Wir haben zwei Werte aus den Vue-Instanzdaten genommen und darauf basierend einen neuen Wert erstellt. Wenn der Wert beispielsweisebrandjemals aktualisiert wird - eine Zeichenfolge in diese Eigenschaft geschriebenVue Crafterywird, mĂĽssen keine Ă„nderungen am Code der berechneten Eigenschaft vorgenommen werden. Diese Eigenschaft gibt weiterhin die richtige Zeichenfolge zurĂĽck, die nun so aussiehtVue Craftery Socks. Die berechnete Eigenschafttitleverwendet die Eigenschaft weiterhinbrandwie zuvor, aber jetzt wird derbrandneue Wert beschrieben.



Es war ein sehr einfaches Beispiel, aber ein Beispiel, das in der Praxis durchaus anwendbar ist. Betrachten wir nun eine komplexere Verwendung berechneter Eigenschaften.



Komplexeres Beispiel



Wir aktualisieren jetzt das auf der Seite angezeigte Bild mit dem updateProduct. Wir gehen dazu ĂĽber variantImageund schreiben dann in die Eigenschaft, imagewas in die Methode gelangt ist, nachdem wir die Maus ĂĽber das entsprechende farbige Quadrat bewegt haben. Der relevante Code sieht folgendermaĂźen aus: 



updateProduct(variantImage) {
  this.image = variantImage;
}


Dieser Mechanismus funktioniert einwandfrei. Wenn wir jedoch nicht nur das Bild, sondern auch etwas anderes ändern müssen, basierend auf dem Farbquadrat, über dem die Maus schwebt, müssen Sie diesen Code umgestalten. Kommen wir dazu.



Anstatt eine Eigenschaft in den Daten zu speichern image, werden wir sie durch eine Eigenschaft ersetzen selectedVariant. Wir initialisieren es auf 0. 



selectedVariant: 0,


Warum 0? Der Punkt ist, dass wir planen, diese Eigenschaft basierend auf dem Index ( index) des Elements festzulegen, über dem sich die Maus befindet. Wir können dem Konstrukt einen Index hinzufügen v-for: 



<div
  class="color-box"
  v-for="(variant, index) in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
  @mouseover="updateProduct(variant.variantImage)"
></div>


Beachten Sie, dass das Konstrukt v-for=«variant in variants»jetzt der Code ist v-for=»(variant, index) in variants».



Statt nun vorbei variant.variantImagezu updateProduct, lassen Sie uns an diese Methode ĂĽbergeben index: 



@mouseover="updateProduct(index)"


Kommen wir nun zum Code der Methode updateProduct. Hier bekommen wir den Index. Und anstatt den neuen Wert zu this.imageschreiben, schreiben Sie indexzu this.selectedVariant. Das heißt, der selectedVariantWert index, der dem Quadrat entspricht, auf dem der Mauszeiger bewegt wurde , fällt in . Zu Debugging-Zwecken geben wir außerdem einen Befehl ein, um den Wert in dieser Methode zu protokollieren index. 



updateProduct(index) {
  this.selectedVariant = index;
  console.log(index);
}


Wenn wir jetzt die Seite aktualisieren und die Entwicklertools-Konsole öffnen, können wir sicherstellen, dass sich die Werte 0 und 1 in der Konsole befinden, wenn Sie den Mauszeiger über die Quadrate bewegen.





Überprüfen der Funktionalität des von uns erstellten Mechanismus



Das Bild wird jedoch nicht mehr auf der Seite angezeigt. In der Konsole wird eine Warnung angezeigt.





Konsolenwarnung



Der Punkt ist, dass wir die Eigenschaft entferntimageund durch eine Eigenschaft ersetzt habenselectedValue, diese Eigenschaft jedoch in unserer Anwendung weiterhin verwendet wird. Beheben wir das Problem, indem wir esimagean eine Vue-Instanz zurĂĽckgeben, diesmal jedoch als berechnete Eigenschaft. Der entsprechende Code sieht folgendermaĂźen aus: 



image() {
  return this.variants[this.selectedVariant].variantImage;
}


Hier geben wir die Eigenschaft variantImagedes Array-Elements zurĂĽck this.variants[this.selectedVariant]. Als Index, ĂĽber den auf das Array-Element zugegriffen wird, wird eine Eigenschaft verwendet this.selectedVariant, die gleich 0 oder 1 ist. Dadurch erhalten wir Zugriff auf das erste oder zweite Array-Element.



Wenn Sie jetzt die Seite aktualisieren, wird das Bild angezeigt und reagiert, wenn Sie mit der Maus ĂĽber die farbigen Quadrate fahren. Jetzt wird dieser Mechanismus mithilfe einer berechneten Eigenschaft implementiert.



Nachdem wir den Code für die Methode updateProductüberarbeitet haben, mit der jetzt der Status der Eigenschaft aktualisiert wird selectedVariant, können wir mit anderen Daten arbeiten, die in Objekten aus dem Array gespeichert sind variants, z. B. dem Feld, das variantQuantitywir jetzt zu den Objekten hinzufügen: 



variants: [
  {
    variantId: 2234,
    variantColor: 'green',
    variantImage: './assets/vmSocks-green.jpg',
    variantQuantity: 10
  },
  {
    variantId: 2235,
    variantColor: 'blue',
    variantImage: './assets/vmSocks-blue.jpg',
    variantQuantity: 0
  }
],


Lassen Sie uns die normale Eigenschaft loswerden inStockund wie beim Arbeiten mit einer Eigenschaft imageeine neue berechnete Eigenschaft mit demselben Namen erstellen, deren RĂĽckgabewert auf selectedVariantund basiert variantQuantity: 



inStock(){
  return this.variants[this.selectedVariant].variantQuantity
}


Diese Eigenschaft ist einer berechneten Eigenschaft sehr ähnlich image. Aber jetzt nehmen wir vom entsprechenden Objekt keine Eigenschaft variantImage, sondern eine Eigenschaft variantQuantity.



Wenn Sie jetzt mit der Maus über ein Quadrat fahren, fällt die Warenmenge, die gleich Null ist, in inStock0, und 0 ist in JavaScript ein Wert, der in einen booleschen Wert konvertiert werden kann false. Aus diesem Grund wird auf der Seite eine Meldung angezeigt Out of Stock.



Beachten Sie, dass die Schaltfläche auch bei korrekter Einstellung inStockauf 0 wie zuvor korrekt reagiert .





Die Schaltfläche und das Etikett hängen von der Menge jedes Produkts ab.



Warum funktioniert alles weiterhin ordnungsgemäß? Der Punkt ist,inStockes wird immer noch verwendet, um eine KlassedisableButtonan unseren Buttonzu binden. Der einzige Unterschied zwischen der neuen Version der Anwendung und der vorherigen Version besteht darin, dass esinStocksichjetzt umeine berechnete Eigenschaft handelt, nicht um eine reguläre Eigenschaft.



Erfahren Sie mehr ĂĽber berechnete Eigenschaften



Berechnete Eigenschaften werden zwischengespeichert. Das heißt, die Ergebnisse der Berechnung dieser Eigenschaften werden im System gespeichert, bis die Daten, von denen diese Ergebnisse abhängen, geändert werden. Wenn es sich ändert variantQuantity, wird der Cache gelöscht. Beim inStocknächsten Zugriff gibt die Eigenschaft ein neues Ergebnis zurück, das im Cache abgelegt wird.



In Anbetracht dessen können wir sagen, dass wenn ressourcenintensive Berechnungen erforderlich sind, um einen bestimmten Wert zu erhalten, es rentabler ist, sie mit einer berechneten Eigenschaft anstatt mit einer Methode durchzuführen. Die Methode muss jedes Mal aufgerufen werden, wenn der entsprechende Wert benötigt wird.



Beachten Sie außerdem, dass Sie die in der Vue-Instanz in Ihrem berechneten Eigenschaftscode gespeicherten Daten nicht ändern sollten. In diesem Code müssen Sie lediglich Berechnungen basierend auf vorhandenen Daten durchführen. Diese Funktionen sollten sauber und frei von Nebenwirkungen sein.



Werkstatt



Fügen Sie dem Datenobjekt, mit dem die Vue-Instanz erstellt wurde, eine neue boolesche Eigenschaft hinzu onSale. Es wird angezeigt, ob der Verkauf läuft. Erstellen Sie eine berechnete Eigenschaft , saledie auf basiert brand, productund onSalebildet eine Linie, es wurde berichtet , dass es jetzt den Verkauf durchgeführt oder nicht. Geben Sie diese Zeile auf der Produktkarte aus.



→ Hier ist eine Vorlage, mit der Sie dieses Problem lösen können.



→ Hier ist eine Lösung für das Problem



Ergebnis



In dieser Lektion haben wir etwas ĂĽber berechnete Eigenschaften gelernt. Hier sind die wichtigsten Dinge, die wir ĂĽber sie gelernt haben:



  • Berechnete Eigenschaften berechnen Werte, speichern sie nicht.
  • Berechnete Eigenschaften können die in der Anwendung gespeicherten Daten verwenden, um daraus neue Daten zu erstellen.




Wenn Sie Ihre Hausaufgaben fĂĽr diesen Kurs machen, teilen Sie uns mit, ob Sie ausschlieĂźlich das tun, was Ihnen angeboten wird, oder ob Sie weiter gehen?



→ Vue.js Anfänger Lektion 1: Instanz Vue

→ Vue.js für Anfänger, Lektion 2: Bindungsattribute

→ Vue.js Anfänger Lektion 3: Bedingtes Rendern

→ Vue.js Anfänger Lektion 4: Listen rendern

→ Vue .js für Anfänger Lektion 5: Ereignisverarbeitung

→ Vue.js Anfänger Lektion 6: Binden von Klassen und Stilen

→ Vue.js Anfänger Lektion 7: berechnete Eigenschaften

→ Vue.js Anfänger Lektion 8: Komponenten





More articles:


All Articles