So verwenden Sie Computing in Vue, um reaktionsfähige Daten abzuhören und das DOM zu aktualisieren

Vue ist ein beliebtes JavaScript-Framework, das reaktionsfähige Datenbindung und komponentenbasierte Konstruktion kombiniert, um die Front-End-Entwicklung zu vereinfachen. Berechnet ist eine Möglichkeit, die reaktionsfähigen Daten von Vue zu verwenden. Es kann dynamisch berechnete Eigenschaften basierend auf abhängigen Daten generieren, Datenkonvertierung und -präsentation realisieren und Zwischenergebnisse automatisch zwischenspeichern, um die Leistung zu verbessern. In diesem Artikel wird erläutert, wie Sie mit Computing reaktionsfähige Daten abhören und das DOM aktualisieren.

1. Grundlegende Verwendung von berechnet

In Vue können wir das berechnete Attribut verwenden, um eine berechnete Eigenschaft zu definieren. Das Syntaxformat lautet:

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

wobei propertyName der Name der berechneten Eigenschaft und function() die spezifische Berechnungsmethode ist. Mit dieser Methode können wir auf das Datenattribut der Vue-Instanz zugreifen und den Wert des Attributs berechnen, zum Beispiel:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

In diesem Beispiel definieren wir ein berechnetes Attribut „totalPrice“, das auf zwei responsiven Daten basiert: Preis und Menge Wenn sich ihre Werte ändern, wird auch der Wert von totalPrice dynamisch aktualisiert. Wir verwenden {{totalPrice}} in der Vorlage, um den Wert dieses berechneten Attributs anzuzeigen. Wir müssen das DOM nicht manuell aktualisieren, um die Methode zur Berechnung des Attributs automatisch auszuführen und das entsprechende DOM-Element zu aktualisieren.

2. Berechneter Abhängigkeitscache

Ein weiteres wichtiges Merkmal des berechneten Attributs ist der Abhängigkeitscache. Das bedeutet, dass die berechnete Eigenschaft nicht neu berechnet wird, sondern direkt das letzte Ergebnis zurückgibt, solange sich die reaktiven Daten, von denen die berechnete Eigenschaft abhängt, nicht geändert haben. Dadurch können unnötige Berechnungen vermieden und die Ausführungseffizienz des Programms verbessert werden.

Zum Beispiel lesen wir im obigen Beispiel den berechneten Gesamtpreis der Immobilie mehrmals ab, zum Beispiel:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

Wie Sie sehen können, lesen wir den Gesamtpreis zweimal. Allerdings wird „totalPrice“ nur dann neu berechnet, wenn sich der Preis oder die Menge ändert, wodurch wiederholte Berechnungen effektiv vermieden werden.

3. Berechnete Getter und Setter

Zusätzlich zu der oben eingeführten grundlegenden Verwendung unterstützt die Berechnung auch die Definition von Gettern und Settern. Dies bedeutet, dass wir während der Zuweisung einer berechneten Eigenschaft zusätzliche Vorgänge durchführen können, wie z. B. Datenvalidierung, Datenformatierung usw. Das Getter- und Setter-Syntaxformat von

computed lautet wie folgt:

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

wobei propertyName der Name der berechneten Eigenschaft ist, der Wert der berechneten Eigenschaft in der Get-Funktion zurückgegeben wird und der Wert der berechneten Eigenschaft im Satz zugewiesen wird Funktion.

Zum Beispiel verwenden wir den Setter im obigen Beispiel, um den Produktstückpreis zu ändern, aber der Grenzstückpreis darf nicht kleiner als 0 sein.

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

In diesem Beispiel verwenden wir _price-Reaktionsdaten mit vorangestelltem Unterstrich, um den tatsächlichen Stückpreis des Produkts zu speichern, und definieren den Preis als berechnetes Attribut mit Getter- und Setter-Operationen. Im Setter ermitteln wir, ob der vom Benutzer eingegebene Preis eine negative Zahl ist. Wenn ja, wird eine Fehlermeldung ausgegeben, andernfalls wird er _price zugewiesen.

Summary

computed ist eine sehr praktische Möglichkeit, reaktionsfähige Daten in Vue zu verwenden. Es kann berechnete Eigenschaften basierend auf abhängigen reaktionsfähigen Daten dynamisch generieren und Zwischenergebnisse automatisch zwischenspeichern, um die Leistung zu verbessern. Wir können verschiedene Datenoperationen in den Gettern und Settern berechneter Eigenschaften durchführen, z. B. Datenformatierung, Datenüberprüfung usw. Dies kann den Code vereinfachen und die Entwicklungseffizienz verbessern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Computing in Vue, um reaktionsfähige Daten abzuhören und das DOM zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!