Zusammenfassung der Verwendung von vue Watch und Computed

01. Hörer beobachten

(1) Funktion

• Überwachung: Wird zum Überwachen von Datenänderungen in Daten verwendet und nur ausgeführt, wenn sich der überwachte Attributwert ändert.

Standard exportieren {
    Daten() {
        zurückkehren {
            Anzahl: 1
        }
    },
    betrachten:{
        // Gewöhnliche Überwachungsmethode, hier ist damit die Überwachung des Zahlenattributs in den Daten gemeint // Der erste Parameter gibt den neuen Wert nach der Änderung an, und der zweite Parameter gibt den alten Wert vor der Änderung an number(newVal,oldVal){
            console.log(neuerWert);
            console.log(alterWert);
        }
    }
}

(2) Eigenschaften und Methoden

• unmittelbar: Gibt an, dass die Eigenschaft sofort nach dem Erstellen der Komponente überwacht wird. Wenn der Wert anfänglich gebunden wird, wird er auf Folgendes gesetzt: unmittelbar: wahr
• Handler: Wird beim Überwachen von Objekten verwendet. Wenn Änderungen auftreten, führen Sie die Methode im Handler aus.
• deep: Zeigt eine eingehende Überwachung von Änderungen an Eigenschaften innerhalb von Objekten und Arrays an. Eingestellt auf: deep: true

Standard exportieren {
    Daten(){
        zurückkehren {
            Anzahl: 1
        }
    },
    betrachten:
        // Auf das Zahlenattribut Nummer achten: {
			handler(neuerWert, alterWert){
                
            },
            unmittelbar: wahr, // Sofort zuhören}
    }
}

(3) Überwachungsgegenstand

• Kann direkte Zuweisungsvorgänge von Objekten überwachen
  • Das Hinzufügen, Ändern oder Löschen von Objekteigenschaften können Sie jedoch nicht überwachen.

Standard exportieren {
    Daten() {
        zurückkehren {
            Objekt: {
                ein: 1
            }
        }
    },
    betrachten:
        Objekt: {
            handler(neuerWert){
                console.log('Abgehört', neuerWert)
            },
            sofort: wahr
        }
    },
    erstellt(){
        // Kann nicht überwacht werden, da es sich um eine Änderungsoperation am Attribut handelt. // Einmal drucken, und das Druckergebnis ist der geänderte Wert.
        dieses.Objekt.a = 2 

        // Es kann überwacht werden, weil es eine direkte Zuweisungsoperation für das Objekt ist. // Zweimal drucken (bei der unmittelbaren Überwachung wird einmal gedruckt, bei der Änderung einmal)
        dieses.obj = { a: 2} 
    }
}

Weil Vue beim Initialisieren der Instanz einen Getter/Setter-Konvertierungsprozess für die Eigenschaft durchführt

Die Eigenschaft muss also im Datenobjekt vorhanden sein, damit Vue es transformieren kann, sodass es reagieren kann.

Daher kann Vue Vorgänge wie das Hinzufügen, Löschen und Ändern von Objekteigenschaften nicht erkennen.

Standardmäßig überwacht der Handler nur Änderungen in Referenzen auf interne Eigenschaften des Objekts.

Daher wird nur zugehört, wenn wir Zuweisungsoperationen durchführen.

• Sie können einen Eigenschaftswert eines Objekts direkt überwachen
  • Wenn es sich bei dieser Eigenschaft um einen Basistypwert handelt, können Sie sie normal überwachen.

Standard exportieren {
    betrachten:
        'Objekt.a': {
            handler(neuerWert){
                console.log(neuerWert)
            }
        }
    },
    erstellt(){
        // Die beiden folgenden Punkte können zweimal überwacht und gedruckt werden this.obj.a = 2
        dieses.obj = { a:2 }
    }
}

• Sie können die Eigenschaft „deep“ für eine umfassende Überwachung verwenden
  • Sie können lediglich Änderungen an bestehenden Eigenschaften überwachen, nicht jedoch neue Eigenschaften.
  • Vue kann dies nicht überwachen.$set, um die Änderungen der ursprünglichen Attribute zu ändern

Dies liegt daran, dass this.$set() dem Ändern des Anfangswerts in data entspricht

Es kann eine Überwachung auslösen, aber die Änderungen werden nicht reflektiert, d. h. newVal === oldVal

Standard exportieren {
    betrachten:
        Objekt: {
            handler(neuerWert){
            	console.log(neuerWert)
            },
            tief: wahr,
            sofort: wahr
        }
    },
    erstellt(){
        // Nach der Tiefenüberwachung können auch Änderungen an Attributen direkt überwacht werden // Zweimal drucken (weil sofort)
        dieses.Objekt.a = 2
        
        // Das Hinzufügen von Objekteigenschaften kann nicht überwacht werden // Einmal drucken, und das Druckergebnis ist das Objekt mit den neu hinzugefügten Eigenschaften // Das heißt, es wird aufgrund der Unmittelbarkeit nur einmal ausgeführt und druckt {a:1,b:2} aus.
        dieses.Objekt.b = 2
        
        // Die Überwachung kann ausgelöst werden, aber die Änderungen können nicht überwacht werden // Wird zweimal gedruckt, beide Werte sind {a:2}, was die Änderungen nicht widerspiegeln kann this.$set(this.obj, 'a', 2)
    }
}

(4) Abhör-Array

• Kann überwachen
  • Direkte Zuweisung von Arrays
  • Hinzufügen, Ändern und Löschen von Vorgängen über Array-Methoden
  • Array-Operationen über die Methode this.$set()

Array-Methoden wie pop(), push() usw. und die Methode this.$set(arr, index, newVal)

Sie können die Überwachung auslösen, aber keine Änderungen widerspiegeln, d. h. newVal === oldVal

• Überwachung nicht möglich
  • Die Hinzufügungs-, Lösch- und Änderungsvorgänge von Nicht-Array-Methoden von Arrays können nicht überwacht werden
  • Es ist nicht möglich, Änderungen im Array direkt über Indexwerte zu überwachen.
  • Änderungen in der Arraylänge können nicht überwacht werden

Standard exportieren {
    Daten() {
        zurückkehren {
            arr: [1]
        }
    },
    betrachten:
        arr: {
            handler(neuerWert, alterWert) {
                console.log('Neu:', neuerWert)
                console.log('alt:', alterWert)
            },
            sofort: wahr
        }
    },
    erstellt() {
        // Kann überwacht werden --- Direkte Zuweisung des gesamten Arrays this.arr = [2]
        
        // Kann nicht überwacht werden --- Indexzuweisung, Längenänderung this.arr[1] = 2
        dies.arr[0] = 2
        diese.arr.länge = 2
        
        // Kann Überwachung auslösen, aber keine Änderungen überwachen => die neuen und alten Werte sind gleich this.arr.push(2)
        dies.$set(dieses.arr, 0, 2)
    }
}

02. Berechnete Eigenschaften

(1) Methode zur Berechnung von Attributen festlegen

• Berechnete Eigenschaften können als Objekt statt als Funktion geschrieben werden. In der Funktionsform verwenden wir jedoch standardmäßig die Get-Methode. Wenn sie als Objekt geschrieben werden, können wir auch die Set-Methode verwenden.

berechnet: {
  vollständiger Name:
    erhalten () {
      gibt `${this.firstName} ${this.lastName}` zurück;
    },
    setze (Wert) {
      Konstantennamen = val.split(' ');
      dieser.Vorname = Namen[0];
      this.lastName = Namen[Namen.Länge - 1];
    }
  }
}

Bei der Ausführung von this.fullName = 'Aresn Liang' wird der berechnete Satz aufgerufen und firstName und lastName werden Aresn und Liang zugewiesen.

Berechnungen können von anderen Berechnungen oder sogar von den Daten anderer Komponenten abhängen.

(2) Differenz

• Berechnete Eigenschaften und Listener
  • Berechnete Eigenschaften sind: Überwachung von Änderungen abhängiger Werte
    • Solange der Abhängigkeitswert unverändert bleibt, wird der Cache direkt zur Wiederverwendung gelesen
    • Berechnete Eigenschaften können nicht auf Datenänderungen in asynchronen Vorgängen reagieren
    • Müssen manuell anrufen
  • Die Funktion der Listener-Überwachung besteht darin, die Änderungen von Attributwerten zu überwachen.
    • Immer wenn sich der Eigenschaftswert ändert, kann eine Callback-Funktion ausgelöst werden
    • Listener können auf Datenänderungen während asynchroner Vorgänge reagieren
    • Automatischer Auslöser
• Berechnete Eigenschaften und Methoden
  • methods ist eine Methode, sie kann Parameter akzeptieren, aber computed nicht
  • Berechnete Daten können zwischengespeichert werden, Methoden nicht
    

(3) Nutzungsszenarien

• Wenn eine Eigenschaft von mehreren Eigenschaften beeinflusst wird, ist eine Berechnung erforderlich.
• Wenn ein Datenelement mehrere Datenelemente beeinflusst, müssen Sie die Überwachung verwenden, z. B. bei der Suche nach Daten

Oben finden Sie eine detaillierte Zusammenfassung der Verwendung von vue Watch und Computed. Weitere Informationen zur Verwendung von vue Watch und Computed finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!