Zusammenfassung der Unterschiede zwischen Vues Überwachung, Berechnung und Methoden

Inhaltsverzeichnis

1 Einleitung
2 Grundlegende Bedienung

2.1 Methoden
2.2 Berechnete Eigenschaften
2.3 Zuhörer ansehen

3 Unterschiede zwischen den drei

3.1 Methoden vs. berechnete Eigenschaften
3.2 Berechnete Eigenschaften vs. Listener

1 Einleitung

Beim Erstellen einer Vue-Instanz können Sie ein Optionsobjekt übergeben

const vm = neuer Vue({
  Daten: {
    Nachricht: 'Hallo'
  },
  berechnet: {},
  Methoden: {},
  betrachten: {}
})

Dieses Optionsobjekt kann zahlreiche Optionen (oder Attribute) angeben. Zu den datenbezogenen Optionen zählen unter anderem data , methods , Berechnet, watch usw.

Unter ihnen können methods , computed und watch alle über Funktionen verarbeiten oder darauf reagieren. Es gibt Unterschiede zwischen diesen dreien, aber man kann sie leicht verwechseln.

2 Grundlegende Bedienung

Verwenden Sie script , um vue.js einzuführen. Die folgenden Codes werden alle im folgenden HTML ausgeführt

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <title>Methoden</title>
    <!-- Importiere vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  </Kopf>
  <Text>
    
  </body>
  <Skript>
    
  </Skript>
</html>

2.1 Methoden

Die in der methods definierten Funktionen werden Methoden genannt. Während des Vue Instanziierungsprozesses werden die Methoden im methods in die Vue-Instanz gemischt und werden zu Methoden der Vue-Instanz. Auf diese Methoden kann direkt über die Vue Instanz zugegriffen werden

<Text>
  <div id="Beispiel">
    <!-- Anzeige: a:1 -->
    <p>ein:{{ plus() }}</p> 
  </div>
</body>
<Skript>
  const vm = neuer Vue({
    el: "#Beispiel",
    Daten: {
      eine: 0,
    },
    Methoden: {
      plus: Funktion () {
        gib dies zurück.a + 1;
      },
    },
  });
  console.log(vm); // Sehen Sie sich die Konsolenausgabe der VM an. Sie können sehen, dass sie eine Methode hat: plus: ƒ (), ⚠️Beachten Sie, dass es sich um eine Methode handelt console.log(vm.plus()); // Greifen Sie direkt über die VM-Instanz auf die Methode zu. Ausgabe: 1
</Skript>

Die Funktion in methods muss zur Ausführung aktiv aufgerufen werden. Der Wert von a aktualisiert <p>a:{{plus()}}</a> auf der Seite nicht.

2.2 Berechnete Eigenschaften

Die in der computed Option definierte Funktion wird als berechnete Eigenschaft bezeichnet. Während des Vue Instanziierungsprozesses werden die berechneten Eigenschaften im computed Objekt in die Vue-Instanz gemischt und werden zu Eigenschaften mit demselben Namen der Vue-Instanz.

<Text>
  <div id="Beispiel">
    <!-- Anzeige: a:1 -->
    <p>a:{{ plus }}</p>
  </div>
</body>
<Skript>
  const vm = neuer Vue({
    el: "#Beispiel",
    Daten: {
      eine: 0,
    },
    berechnet: {
      plus: Funktion () {
        gib dies zurück.a + 1;
      },
    },
  });
  console.log(vm); // // Überprüfen Sie die VM-Ausgabe der Konsole. Sie können sehen, dass sie ein Attribut hat: plus:1, ⚠️Beachten Sie, dass es ein Attribut ist</script>

Auf den ersten Blick scheinen die computed und methods die gleiche Funktionalität zu haben, und in diesem Beispiel haben sie tatsächlich die gleiche Wirkung.

Tatsächlich wird der Unterschied zwischen den beiden durch das Drucken der VM-Instanz und der Zugriffsmethode widergespiegelt:

Die Funktionen in methods werden zu Methoden von vm
Nach der Berechnung wird die computed Funktion zum gleichnamigen Attribut von vm , und der Attributwert ist das Berechnungsergebnis der Funktion, d. h. der Rückgabewert

Darüber hinaus können berechnete Eigenschaften im Gegensatz zu Methoden reaktionsfähig aktualisiert werden, wenn sich die Daten ändern, von denen sie abhängen, d. h. wenn sich eine ändert, wird auch plus Eigenschaft aktualisiert.

2.3 Zuhörer ansehen

Das Schlüssel-Wert-Paar in der watch wird als Listener oder Listening Property/Listening Property bezeichnet. Der Schlüssel ist der zu beobachtende Ausdruck und der Wert die entsprechende Callback-Funktion (der Wert kann auch andere Formen haben, die hier nicht erweitert werden).

Während des Vue Instanziierungsprozesses werden die zu überwachenden Variablen aufgezeichnet. Wenn sich diese Variablen ändern, wird die entsprechende Rückruffunktion ausgeführt.

<Text>
  <div id="Beispiel">
    <!-- Anzeige: a:1 -->
    <p>ein:{{ ein }}</p>
  </div>
</body>
<Skript>
  const vm = neuer Vue({
    el: "#Beispiel",
    Daten: {
      eine: 0,
    },
    betrachten:
      a: Funktion () {
        console.log("a hat sich geändert"); // Da sich der Wert von a geändert hat, wird die Rückruffunktion ausgeführt console.log(this.a);
      },
    },
  });
  vm.a = 1; // Ändere hier manuell den Wert von a</script>

3 Unterschiede zwischen den drei

3.1 Methoden vs. berechnete Eigenschaften

Neben den beiden unter 2.2 genannten Unterschieden ist der wichtigste Unterschied:

Berechnete Eigenschaften werden basierend auf ihren reaktionsfähigen Abhängigkeiten zwischengespeichert, d. h. die Auswertungsfunktion wird nur erneut ausgelöst, wenn sich a im obigen Text ändert, andernfalls werden mehrere Aufrufe aus dem Cache ausgewertet, was bei aufwändigen Berechnungen sehr nützlich ist, um wiederholte Berechnungen zu vermeiden.
Methoden werden beim Aufruf immer erneut ausgeführt

Die folgende Tabelle fasst die Unterschiede zwischen den beiden zusammen:

	Methoden	berechnet
Was wird die VM-Instanz, nachdem Vue instanziiert wurde?	Werden Sie eine Methode auf der VM-Instanz	Wird zu einer Eigenschaft der VM-Instanz
Kann es basierend auf abhängigen Daten reaktionsschnell aktualisiert werden?	Nein, Sie müssen die Methode aktiv aufrufen	fähig
Kann es zwischengespeichert werden?	Nein, jeder Anruf wird erneut ausgeführt	Ja, die abhängigen Daten bleiben unverändert und der Wert wird aus dem Cache übernommen

3.2 Berechnete Eigenschaften vs. Listener

Der erste und offensichtlichste Unterschied besteht darin, dass die Benennungsmethode des Listeners festgelegt ist. Sie müssen der Person, der Sie zuhören möchten, denselben Namen geben. Methoden und berechnete Eigenschaften können beliebig benannt werden
Zweitens kann der Listener nicht aktiv zugreifen, während die anderen beiden aktiv zugreifen können
Anwendungsfälle für berechnete Eigenschaften und Listener:

Wenn ein Wert aus einem oder mehreren Daten berechnet werden muss, verwenden Sie eine berechnete Eigenschaft

Die Listening-Eigenschaft wird hauptsächlich verwendet, um Änderungen eines bestimmten Werts zu überwachen und dann die erforderliche logische Verarbeitung durchzuführen. Darüber hinaus ist die Listening-Eigenschaft nützlicher, wenn bei Datenänderungen asynchrone oder kostspielige Vorgänge ausgeführt werden müssen. Konkrete Beispiele finden Sie im Vue-Dokument - Listener

Dies ist das Ende dieses Artikels über die Unterschiede zwischen Vues watch , computed und methods . Weitere Informationen zu den Unterschieden zwischen Vue watch , computed und methods finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Der Unterschied zwischen Methoden, Überwachung und Berechnung in Vue

<<: Verwendung von Kubernetes YAML-Dateien

>>: Zusammenfassung der Erfahrungen mit der browserübergreifenden Entwicklung (I) HTML-Tags

Die Hook-Funktion von Vue-Router implementiert Routing Guard

Zusammenfassung der Unterschiede zwischen Vues Überwachung, Berechnung und Methoden

Inhaltsverzeichnis

1 Einleitung

2 Grundlegende Bedienung

2.1 Methoden

2.2 Berechnete Eigenschaften

2.3 Zuhörer ansehen

3 Unterschiede zwischen den drei

3.1 Methoden vs. berechnete Eigenschaften

3.2 Berechnete Eigenschaften vs. Listener

Die Hook-Funktion von Vue-Router implementiert Routing Guard

Analyse von zwei Implementierungsmethoden zum Hinzufügen von statischem Routing in Linux

Analyse der Verwendung von MySQL-Abfragesortierung und Abfrageaggregationsfunktionen

Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen

Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

HTML5 und jQuery zum Implementieren von Vorschau-Codebeispielen vor dem Hochladen lokaler Bilder

Kontext und Eigenschaften von React erklärt

Beheben Sie den Fehler während der Verbindungsausnahme in Docker

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder

Artikel empfehlen

Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)

So finden Sie langsame SQL-Anweisungen in MySQL

CSS Clear Float Clear:Both Beispielcode

Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript

Detaillierte Erklärung von BOM und DOM in JavaScript

js, um einen Ein- und Ausblendeffekt des Bildes zu erzielen

Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS

Umfassendes Verständnis von HTML-Formularelementen

SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

So zeigen Sie die Zeitzone in MySQL an und ändern sie

Detaillierte Erklärung zur Verwendung von React.cloneElement

So verwenden Sie React-Slots

Grafisches Tutorial zur Installation und Konfiguration der MSI-Version von MySQL 8.0.11