Detaillierte Erläuterung des Überwachungsmethodenfalls von Vue

Detaillierte Erläuterung des Überwachungsmethodenfalls von Vue

Überwachungsmethode in Vue

betrachten

Beachten

Name: Sie sollten dem Attribut, das Sie überwachen möchten, denselben Namen geben.

1. Funktion

Wird verwendet, um Datenänderungen in der Vue-Instanz zu überwachen und Statusänderungen jederzeit zu ändern.

2. Auslösebedingungen

Wenn sich die von Ihnen überwachte Eigenschaft ändert, wird die entsprechende Überwachungsmethode automatisch aufgerufen

3. Anwendungsszenarien

Wird für asynchrone Verarbeitung und relativ teure Operationen verwendet

4. Beispiele

	 betrachten:{
             Name(neuerWert,alterWert){
                  //Berechnete Eigenschaften können zwei Parameter akzeptieren, der erste Parameter ist der neue Eigenschaftswert, der zweite Parameter ist der alte Eigenschaftswert // this.age
                    // console.log('Name-Eigenschaft hat sich geändert')
                    console.log(neuerWert,alterWert)
                }

5. Bei der Überwachung eines Objekts

<Skript>
Standard exportieren {
    Daten() {
        zurückkehren {
            Objekt: {
                Name: "Zhang San",
                Alter: 20,
                Kinder: [
                    {
                        Name: "Li Si",
                        Alter: 27
                    },
                    {
                        Name: "Wang Wu",
                        Alter: 23
                    }
                ]
            }
        };
    },
    betrachten:
        Objekt: {
            Handler: Funktion (neuer Wert, alter Wert) {
                console.log("neuerWert:", neuerWert);
                console.log("alterWert:", alterWert);
            },
            tief: wahr,
            sofort: wahr
        },
        "obj.name": Funktion(neuerWert, alterWert) {
            
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
};
</Skript>

Wenn Sie ein Objekt überwachen, müssen Sie „deep:true“ hinzufügen, damit Sie es in Echtzeit auf der untersten Ebene überwachen können. Wenn Sie es nicht hinzufügen, kann das Objekt keine Änderungen überwachen.

unmittelbares Attribut: Boolescher Wert
immediate: true: Datenänderungen beim ersten Laden überwachen
unmittelbar: falsch: nur hören, wenn Änderungen auftreten

tief:wahr;

Es aktiviert das Deep Listening, d. h., allen Attributen werden Listener hinzugefügt und die Handler-Funktion wird ausgeführt, wenn sich eines davon ändert.

Dies ist das Ende dieses Artikels über den detaillierten Fall der Überwachungsmethode von Vue. Weitere relevante Inhalte zur Überwachungsmethode von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Eine kurze Analyse der Verwendung von watchEffect in Vue3
  • Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3
  • Zusammenfassung der Verwendung von vue Watch und Computed
  • So verstehen Sie den Unterschied zwischen „Berechnet“ und „Beobachten“ in Vue
  • Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung
  • Gründe und Lösungen für die mehrfache Ausführung der Überwachungsmethode, wenn Vue Routenänderungen überwacht
  • Die Verwendung und der Unterschied zwischen vue3 watch und watchEffect
  • Einfaches Methodenbeispiel für ein Vue Watch-Überwachungsobjekt

<<:  MySQL 5.7 Installations- und Konfigurations-Tutorial unter CentOS7 64 Bit

>>:  CentOS 6 verwendet Docker, um ein Beispiel für den Betrieb einer Redis-Master-Slave-Datenbank bereitzustellen

Artikel empfehlen

Lösung für MySQL-Verbindungsausnahme und Fehler 10061

MySQL ist ein relationales Datenbankverwaltungssy...

Was ist COLLATE in MYSQL?

Vorwort Führen Sie den Befehl show create table &...

Einige Tipps zum Website-Design

Tatsächlich haben wir in letzter Zeit viel über W...

Beispiele für die Verwendung von Docker und Docker-Compose

Docker ist eine Open-Source-Container-Engine, mit...

Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten

Vorwort Früher habe ich den Cache verwendet, um d...

MySQL5.7 Master-Slave-Konfigurationsbeispielanalyse

Implementierungsmethode für die MySQL5.7-Master-S...

Einführung in die UFW-Firewall unter Linux

Werfen wir einen Blick auf ufw (Uncomplicated Fir...

html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung

Code kopieren Der Code lautet wie folgt: <!--[...

Installieren Sie JDK1.8 in einer Linux-Umgebung

Inhaltsverzeichnis 1. Installationsumgebung 2. In...