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

Detaillierte Erläuterung des Konfigurationsprozesses des logischen Linux-LVM-Volumes (Erstellen, Erhöhen, Reduzieren, Löschen, Deinstallieren)

Artikel

Tabelle zeigt den Grenzcode, den Sie anzeigen möchten

Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen

Artikel

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

Detaillierte Erläuterung des Konfigurationsprozesses des logischen Linux-LVM-Volumes (Erstellen, Erhöhen, Reduzieren, Löschen, Deinstallieren)

Tabelle zeigt den Grenzcode, den Sie anzeigen möchten

SQL Left Join und Right Join - Prinzip und Beispielanalyse

So konfigurieren Sie Linux für die Verwendung der LDAP-Benutzerauthentifizierung

Lösung, wenn Docker plötzlich vom externen Netzwerk nicht mehr erreichbar ist

Vue implementiert einen Scrollbar-Stil

Eine gute Möglichkeit, Ihre Designfähigkeiten zu verbessern

Welche Vorteile bietet die Verwendung eines B+-Baums als Indexstruktur in MySQL?

Detaillierte Erklärung der Winkelinhaltsprojektion

Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen

Artikel empfehlen

SQL verwendet die Funktion ROW_NUMBER() OVER, um eine Sequenznummer zu generieren

Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert

Zusammenfassung der WEBAPP-Entwicklungskompetenzen (Hinweise zur Entwicklung mobiler Websites)

Lösung für Fremdschlüsselfehler bei der MySQL-Tabellenerstellung

Grundlegende Schritte zur Verwendung einer Mysql-SSH-Tunnelverbindung

So verteilen Sie mit CSS zwei Schaltflächen auf der linken und rechten Seite desselben übergeordneten Tags

Lösen Sie das Problem, dass VMware das 64-Bit-Betriebssystem in der Win10-Home-Version nicht installieren kann

Vue verwendet Filter zum Formatieren von Daten

Beispiele für JavaScript-Entschüttelungen und Drosselung

Windows Server 2019 installieren (grafisches Tutorial)

Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers

Zehn nützliche und einfache MySQL-Funktionen

Detaillierte Erklärung der HTML-Download-Funktion

Vier Modi zum Öffnen und Schließen von Oracle

Verwenden von React+Redux zum Implementieren der Zählerfunktion und aufgetretene Probleme