Heim  >  Artikel  >  Web-Frontend  >  Tipps zur Verwendung von Computed und Watch zur Implementierung der Datenberechnung und -überwachung in Vue

Tipps zur Verwendung von Computed und Watch zur Implementierung der Datenberechnung und -überwachung in Vue

WBOY
WBOYOriginal
2023-06-25 13:00:242408Durchsuche

Vue.js ist ein beliebtes JavaScript-Front-End-Framework, das umfangreiche Datenbindungs- und Reaktionsfunktionen bietet und es uns ermöglicht, den Status von Webanwendungen einfach zu verwalten. Darunter sind „computed“ und „watch“ zwei wichtige Datenverarbeitungs- und Überwachungstools in Vue.js. In diesem Artikel wird vorgestellt, wie man sie zur Implementierung von Datenberechnungs- und Überwachungstechniken verwendet.

1. Berechnete Eigenschaft ist eine Eigenschaft, die vom Wert anderer Eigenschaften abhängt. Das heißt, wenn sich die Werte anderer Eigenschaften ändern, wird die berechnete Eigenschaft automatisch neu berechnet. Die berechnete berechnete Eigenschaft hat zwei Hauptfunktionen:

wird zum Berechnen neuer Daten verwendet, z. B. zum Anzeigen der Gesamtzahl der Listenelemente oder zum Sortieren von Listendaten.
  • Verarbeiten Sie vorhandene Daten, z. B. Formatierungsdatum oder -betrag usw.
  • 1.1 Neue Daten berechnen

Wir können mehrere berechnete Eigenschaften im berechneten Objekt der Vue-Instanz definieren. Das von einer berechneten Eigenschaft zurückgegebene Ergebnis kann direkt in der Vorlage verwendet werden und wird nur dann neu berechnet, wenn sich die abhängige Eigenschaft ändert. Hier ist ein Beispiel:

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

Im obigen Beispiel sortieren wir die Produktliste nach der Berechnung von Attributen. Die berechnete Eigenschaft sortedProducts sortiert die Preise der Produkte in aufsteigender Reihenfolge und gibt die sortierten Ergebnisse dann zum Rendern an die v-for-Direktive in der Vorlage zurück.

Es ist zu beachten, dass eine berechnete Eigenschaft nur dann neu berechnet wird, wenn sich die Eigenschaften, von denen sie abhängt, ändern. Selbst wenn wir this.products in der berechneten Eigenschaft sortedProducts verwenden, wird sortedProducts nicht neu berechnet, solange sich die Produkte nicht geändert haben.

1.2 Vorhandene Daten verarbeiten

Berechnete Eigenschaften können nicht nur zum Berechnen neuer Daten verwendet werden, sondern auch zum Verarbeiten vorhandener Daten, z. B. zum Formatieren von Datumsangaben oder Beträgen usw. Hier ist ein Beispiel:

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

Im obigen Beispiel formatieren wir die Bestellzeit durch Berechnen von Attributen in eine lokale Datums- und Uhrzeitzeichenfolge (toLocaleString) und zeigen das formatierte Ergebnis in der Vorlage an. Aufgrund der Art der berechneten Eigenschaften wird formattedTime nur dann neu berechnet, wenn sich orderTime ändert.

2. watch

watch ist eine Funktion, die einheitliche Datenquellen umfassend überwacht. Anders als bei der Berechnung wird die Vorlage nicht automatisch neu gerendert, wenn sich die von Watch überwachte Datenquelle ändert, sondern der Vorgang muss manuell ausgeführt werden. watch wird hauptsächlich zur Überwachung von Datenänderungen verwendet, um entsprechende Vorgänge auszulösen. Hier ist ein Beispiel:

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

Im obigen Beispiel verwenden wir watch, um die Textvariable im Eingabefeld zu überwachen. Wenn die Textlänge 10 Zeichen überschreitet, löst Watch den entsprechenden Vorgang aus und zeigt ein Warnfeld an, um den Benutzer daran zu hindern, die Eingabe fortzusetzen. Gleichzeitig zählen wir die Anzahl der verbleibenden Zeichen anhand des berechneten Attributs. Wir können sehen, dass das berechnete Attribut charsLeft nur dann neu berechnet wird, wenn sich der Text ändert.

Es ist zu beachten, dass die von watch überwachte Variable eine Funktion ist und zwei Parameter erhält: neuer Wert und alter Wert. Basierend auf diesen beiden Parametern können wir entsprechende Operationen durchführen. watch bietet außerdem erweiterte Optionen wie umfassende Überwachung und sofortige Ausführung, die je nach spezifischen Anforderungen konfiguriert werden können.

3. Fazit

computed und watch sind wesentliche Werkzeuge in Vue.js, die sich sehr gut für die komplexe Verarbeitung und Überwachung von Daten eignen. Wir können mehrere berechnete Eigenschaften in berechnet definieren und die Berechnungsreihenfolge und Aktualisierungsmethode durch Abhängigkeiten steuern. Mit Watch können wir die Datenquelle umfassend überwachen und in Echtzeit auf Änderungen in der Datenquelle reagieren. Obwohl für Computing und Watch bestimmte Lern- und Nutzungskosten anfallen, hilft Ihnen die Erhöhung dieser Kosten dabei, flexiblere und effizientere Vue-Anwendungen zu erstellen.

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von Computed und Watch zur Implementierung der Datenberechnung und -überwachung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn