So optimieren Sie gemeinsam die Anwendungsleistung mithilfe der berechneten Attribute und Überwachungsattribute von Vue

So optimieren Sie gemeinsam die Anwendungsleistung mithilfe der berechneten Eigenschaften und Überwachungseigenschaften von Vue.

Einführung:
Vue ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen. Sein Kernkonzept besteht darin, Daten und Ansichten bidirektional zu binden. In der tatsächlichen Entwicklung müssen wir häufig einige Daten verarbeiten, die eine Echtzeitberechnung oder -überwachung erfordern, z. B. Formularvalidierung, Datenfilterung usw. Um die Anwendungsleistung zu verbessern, stellt Vue berechnete Attribute und Überwachungsattribute bereit, um diese Anforderungen gemeinsam zu bewältigen. In diesem Artikel wird die Verwendung berechneter Attribute und Überwachungsattribute zur Optimierung der Anwendungsleistung vorgestellt und entsprechende Codebeispiele gegeben.

1. Verwendung des berechneten Attributs
Das berechnete Attribut ermöglicht es uns, einige Eigenschaften basierend auf reaktionsfähigen Abhängigkeiten zu deklarieren und die Berechnungslogik darin zu kapseln. Vue aktualisiert die Werte berechneter Eigenschaften automatisch basierend auf Änderungen in zugehörigen Abhängigkeiten, um sicherzustellen, dass sie immer auf dem neuesten Stand sind.

1.1 Grundlegende Syntax
Das Deklarieren des berechneten Attributs in einer Vue-Komponente ist sehr einfach. Sie müssen lediglich eine Funktion im berechneten Attribut der Komponente definieren. Zum Beispiel:

computed: {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Im obigen Code definieren wir ein berechnetes Attribut fullName, das den vollständigen Namen nach der Kombination aus Vorname und Nachname zurückgibt.

1.2 Computational Cache
Ein wichtiges Merkmal des berechneten Attributs ist das Computational Caching. Wenn sich die Reaktionsdaten, von denen ein berechnetes Attribut abhängt, ändern, wird das berechnete Attribut neu berechnet und die Berechnungsergebnisse werden zwischengespeichert. Wenn beim nächsten Mal auf die berechnete Eigenschaft zugegriffen wird und sich keine zugehörigen Abhängigkeiten geändert haben, gibt Vue den zwischengespeicherten Wert ohne Neuberechnung direkt zurück.

Dieser Berechnungs-Cache-Mechanismus verbessert die Leistung erheblich, insbesondere wenn berechnete Attribute große Rechenressourcen erfordern, wie z. B. Array-Filtervorgänge.

1.3 Beispiel
Das Folgende ist ein Beispielcode, der das berechnete Attribut verwendet:

<template>
  <div>
    <input v-model="firstName" type="text" placeholder="请输入姓">
    <input v-model="lastName" type="text" placeholder="请输入名">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Im obigen Code binden wir bidirektional zwei Eingabeelemente und das Datenattribut der Komponente über die V-Modell-Direktive. Verwenden Sie dann {{ fullName }} in der Vorlage, um die Berechnungsergebnisse anzuzeigen. Wenn sich firstName oder lastName ändert, aktualisiert Vue automatisch den Wert von fullName und rendert das aktualisierte Ergebnis auf der Seite.

2. Verwendung des Überwachungsattributs
Das Überwachungsattribut ermöglicht es uns, eine bestimmte Datenänderung zu überwachen und entsprechende Vorgänge durchzuführen, wenn sich die Daten ändern. Im Gegensatz zum berechneten Attribut führt das Watch-Attribut keine Berechnungen durch, sondern führt eine benutzerdefinierte Logik aus, nachdem sich die Daten geändert haben.

2.1 Grundlegende Syntax
Die Deklaration des Watch-Attributs in der Vue-Komponente ist ebenfalls sehr einfach. Sie müssen lediglich eine Funktion im Watch-Attribut der Komponente definieren. Zum Beispiel:

watch: {
    firstName(newValue, oldValue) {
        console.log(`firstName从${oldValue}变为${newValue}`);
    }
}

Im obigen Code definieren wir ein Überwachungsattribut, um die Änderung von Vorname zu überwachen und die Werte vor und nach der Änderung auszugeben, wenn sie sich ändert.

2.2 Deep Monitoring
Standardmäßig überwacht Vue nur Änderungen in direkten Eigenschaften von Objekten oder Arrays. Wenn Sie Änderungen in allen Attributen in einem Objekt oder Array genau überwachen müssen, können Sie das Deep-Attribut im Watch-Attribut verwenden. Zum Beispiel:

watch: {
    obj: {
        handler(newValue, oldValue) {
            console.log('obj发生变化');
        },
        deep: true
    }
}

Im obigen Code überwachen wir die Änderungen eines Objekts namens obj genau. Wenn sich ein Attribut in obj ändert, wird die entsprechende Verarbeitungsfunktion ausgelöst. Dies ist nützlich, um Änderungen an Objekten abzuhören.

2.3 Asynchrone Überwachung
Manchmal möchten wir nach Datenänderungen einige asynchrone Vorgänge ausführen, z. B. das Senden von Anforderungen oder das Aktualisieren von Caches. Vue ermöglicht die Definition einer asynchronen Funktion namens Handler im Watch-Attribut, um diese Situation zu bewältigen. Beispiel:

watch: {
    firstName(newValue, oldValue) {
        this.debouncedGetData();
    }
},
methods: {
    debouncedGetData: debounce(function() {
        // 异步操作
    }, 500)
}

Im obigen Code verwenden wir die Debounce-Funktion in der Lodash-Bibliothek, um die Häufigkeit des Aufrufs von this.debouncedGetData zu begrenzen und sicherzustellen, dass innerhalb von 500 Millisekunden nur ein asynchroner Vorgang ausgeführt wird.

3. Kollaborative Nutzung von berechneten Attributen und Überwachungsattributen
Berechnete Attribute und Überwachungsattribute können gemeinsam verwendet werden und schließen sich nicht gegenseitig aus. In der tatsächlichen Entwicklung können wir je nach Bedarf flexibel eine der beiden auswählen oder beide gleichzeitig verwenden.

Bei Verwendung des berechneten Attributs müssen Sie die Eigenschaften des Berechnungscache berücksichtigen, der für Ergebnisse geeignet ist, die auf anderen reaktionsfähigen Datenberechnungen basieren. Bei Verwendung des Watch-Attributs werden normalerweise Änderungen in den Reaktionsdaten überwacht und entsprechende Vorgänge ausgeführt. Dies eignet sich für Szenarien, in denen eine sofortige Reaktion auf Datenänderungen erforderlich ist.

Zum Beispiel können wir das berechnete Attribut verwenden, um den Gesamtpreis eines Warenkorbs zu berechnen:

computed: {
    totalPrice() {
        return this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
    }
}

Und das Watch-Attribut verwenden, um die Änderung der Menge eines Produkts im Warenkorb zu überwachen und den Gesamtpreis zu aktualisieren, wenn es passiert Änderungen:

watch: {
    'cart': {
        handler(newValue, oldValue) {
            this.totalPrice = this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
        },
        deep: true
    }
}

Im obigen Code überwachen wir Änderungen im Warenkorb (Warenkorb). Wenn sich die Menge eines Produkts im Warenkorb ändert, wird der Gesamtpreis (totalPrice) neu berechnet und aktualisiert.

Schlussfolgerung:
In der Vue-Entwicklungspraxis kann die rationelle Verwendung berechneter Attribute und Überwachungsattribute die Anwendungsleistung und Entwicklungseffizienz verbessern. Das berechnete Attribut kann Rechenressourcen einsparen und komplexe Geschäftslogik implementieren, während das watch-Attribut Datenänderungen überwachen und entsprechende Vorgänge ausführen kann, um bestimmte Anforderungen zu erfüllen. Die flexible Verwendung dieser beiden Funktionen je nach Situation kann den Code prägnanter und eleganter machen.

Das obige ist der detaillierte Inhalt vonSo optimieren Sie gemeinsam die Anwendungsleistung mithilfe der berechneten Attribute und Überwachungsattribute von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!