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

Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware

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

Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware

Vue-Ereignisparameter $event = Ereigniswertfall

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Win10

So installieren Sie Tomcat8 im Docker

Lösung für MySQL-Replikationsfehler aufgrund voller Festplatte

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4

Natives Javascript+CSS, um den Karusselleffekt zu erzielen

HTML-Selbststudium (I) Grundlegende Elemente und Attribute üben (Schreiben Sie Ihren eigenen Code)

Drei Möglichkeiten zur Verwendung von CSS-Inlinestilen, eingebetteten Stilen und externen Referenzstilen

Artikel empfehlen

So installieren Sie MySQL unter Linux (Yum und Quellcode-Kompilierung)

So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit

So erstellen und implementieren Sie ein Node-Projekt mit Docker

Detaillierte Erklärung zum Übergeben von Werten zwischen React-Hook-Komponenten (mithilfe von ts)

Eine kurze Analyse des Unterschieds zwischen ref und toRef in Vue3

Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS

Spezifische Verwendung der MySQL-Segmentierungsfunktion substring()

Detaillierte Erklärung zur Einstellung des Hintergrundbild-Attributs in HTML

So ändern Sie den Hostnamen in Linux dauerhaft

MySQL-Datenbank implementiert MMM-Hochverfügbarkeitsclusterarchitektur

Installation der virtuellen Maschine Kali Linux Vmware (Abbildung und Text)

Detaillierte Schritte zur Installation von RabbitMQ im Docker

Die ultimative Lösung zum Abspielen von Hintergrundmusik im Firefox-Browser (Chrome-Multibrowser-kompatibel)

Implementierungsideen und Schritte für die MySQL-Master-Slave-Konstruktion (mehrere Master und ein Slave)

Beispielcode zur Implementierung der Alipay-Sandbox-Zahlung mit Vue+SpringBoot