So verstehen Sie den Unterschied zwischen „Berechnet“ und „Beobachten“ in Vue

Überblick

Wir werden in Vue-Projekten mehr oder weniger „computed“ und „watch“ verwenden. Beide scheinen in der Lage zu sein, Daten zu überwachen, aber es gibt dennoch Unterschiede. Um den Unterschied zwischen den beiden zu verstehen, verwenden wir also ein kleines Beispiel.

berechnet

Eine berechnete Eigenschaft ist ein neuer Wert, der auf Grundlage der in Daten deklarierten Daten oder der Daten in von der übergeordneten Komponente übergebenen Eigenschaften berechnet wird. Dieser neue Wert ändert sich nur entsprechend der Änderung bekannter Werte. Kurz gesagt: Diese Eigenschaft hängt von anderen Eigenschaften ab und wird aus anderen Eigenschaften berechnet.

<p>Name: {{ vollständigerName }}</p>
... ...
Daten: {
    Vorname: 'David',
    Nachname: 'Beckham'
},
berechnet: {
    fullName: function() { //Der Rückgabewert der Methode wird als Eigenschaftswert verwendet return this.firstName + ' ' + this.lastName
    }
}

Definieren Sie die Methode zum Berechnen der Eigenschaft im berechneten Eigenschaftsobjekt und rufen Sie sie in der Form eines Eigenschaftszugriffs auf, genau wie beim Zugriff auf die Dateneigenschaft im Datenobjekt, d. h. verwenden Sie {{Methodenname}}, um das Berechnungsergebnis auf der Seite anzuzeigen.

Hinweis: Die berechnete Eigenschaft „fullName“ kann nicht in den Daten definiert werden, aber der zugehörige bekannte Wert des berechneten Eigenschaftswerts befindet sich in den Daten.

Wenn in den Daten „fullName“ definiert ist, wird ein Fehler wie unten gezeigt gemeldet:

Denn wenn der berechnete Eigenschaftswert eine Funktion ist, wird standardmäßig die Methode get verwendet und es muss ein Rückgabewert vorhanden sein. Der Rückgabewert der Funktion ist der Eigenschaftswert der Eigenschaft. Die berechnete Eigenschaft definiert fullName und gibt das entsprechende Ergebnis an diese Variable zurück. Die Variable kann nicht wiederholt definiert und zugewiesen werden.

In der offiziellen Dokumentation wird auch ein wichtiges Merkmal von Computed hervorgehoben, nämlich dass Computed über eine Caching-Funktion verfügt. Beispielsweise zeige ich fullName mehrmals auf der Seite an:

<p>Name: {{ vollständigerName }}</p>
<p>Name: {{ vollständigerName }}</p>
<p>Name: {{ vollständigerName }}</p>
<p>Name: {{ vollständigerName }}</p>
<p>Name: {{ vollständigerName }}</p>
... ... 

berechnet: {
    vollständigerName: Funktion () {
         console.log('computed') // Wird nur einmal in der Konsole gedruckt return this.firstName + ' ' + this.lastName
    }
}

Wir wissen, dass die in „Berechnet“ definierte Funktion nur einmal ausgeführt wird und nur aufgerufen wird, wenn sich die anfängliche Anzeige oder zugehörige Daten, Eigenschaften und andere Attributdaten ändern.

Berechnete Eigenschaftswerte speichern ihre Berechnungsergebnisse standardmäßig im Cache. Berechnete Eigenschaften werden basierend auf ihren reaktionsfähigen Abhängigkeiten im Cache gespeichert.

Der berechnete Code wird nur ausgeführt, wenn die berechnete Eigenschaft verwendet wird. Bei wiederholten Aufrufen wird das Berechnungsergebnis im Cache direkt abgerufen, solange die abhängigen Daten unverändert bleiben. Die berechneten Werte werden nur dann neu berechnet, wenn sich die abhängigen Daten ändern.

Erweiterte berechnete Eigenschaften:

Die Eigenschaften in „Berechnet“ haben eine Get-Methode und eine Set-Methode. Wenn sich die Daten ändern, wird die Set-Methode aufgerufen. Als Nächstes verwenden wir die Getter/Setter-Methode des berechneten Attributs, um die Attributdaten anzuzeigen und zu überwachen, d. h. eine bidirektionale Bindung.

berechnet: {
    vollständiger Name:
        get() { //Rückruf zum Lesen des aktuellen Eigenschaftswerts, Berechnen und Zurückgeben des Werts der aktuellen Eigenschaft basierend auf den relevanten Daten return this.firstName + ' ' + this.lastName
        },
        set(val) { // Rückruf, wenn sich der Attributwert ändert, Aktualisierung der zugehörigen Attributdaten, val ist der letzte Attributwert von fullName const names = val ? val.split(' ') : [];
            dieser.Vorname = Namen[0]
            this.lastName = Namen[1]
        }
    }
}

Überwachungseigenschaften überwachen

Verwenden Sie die $watch()- oder Watch-Konfiguration des VM-Objekts, um Attributänderungen an der Vue-Instanz oder Änderungen in bestimmten Daten zu überwachen und dann bestimmte Geschäftslogikvorgänge auszuführen. Wenn sich die Eigenschaft ändert, wird die Rückruffunktion automatisch aufgerufen und die Berechnung innerhalb der Funktion durchgeführt. Die Datenquellen, die es überwachen kann, sind: Daten, Eigenschaften und berechnete Daten.

Das obige Beispiel wird durch watch implementiert:

betrachten:
    // Überwachen Sie den Vornamen in den Daten. Wenn er sich ändert, setzen Sie den geänderten Wert auf den vollständigen Namen in den Daten. val ist der neueste Wert von Vorname Vorname: Funktion(val) { 
        dieser.vollständigerName = Wert + ' ' + dieser.letzterName
    },
    Nachname: Funktion(Wert) {
        dieser.vollständigerName = dieser.vorname + ' ' + val
    }    
}
// Aus dem Obigen können wir ersehen, dass watch zwei Daten überwachen muss und der Code desselben Typs wiederholt wird, sodass er prägnanter ist als die Verwendung von berechnetem

Hinweis: Die Abhörfunktion hat zwei Parameter. Der erste Parameter ist der letzte Wert und der zweite Parameter ist der Wert vor der Eingabe. Die Reihenfolge muss neuer Wert, alter Wert sein. Wenn nur ein Parameter geschrieben wird, ist dies der letzte Attributwert.

Ein weiterer Anhaltspunkt bei der Wahl zwischen „Watch“ und „Computed“ ist der Hinweis auf der offiziellen Website: Die „Watch“-Methode ist besonders nützlich, wenn Sie bei Datenänderungen asynchrone oder aufwändige Vorgänge ausführen müssen. Daher muss die Uhr asynchronen Betrieb unterstützen.

Das Obige beschränkt sich auf die Überwachung einfacher Datentypen. Zur Überwachung komplexer Datentypen ist eine umfassende Überwachung erforderlich.

deep: Um Änderungen der internen Werte eines Objekts zu erkennen, können Sie im Optionsparameter deep:true angeben. Beachten Sie, dass dies beim Abhören von Array-Änderungen nicht erforderlich ist.

Daten: {
    vollständiger Name:
        Vorname: 'David',
        Nachname: 'Beckham'
    }
},
betrachten:
    vollständiger Name:
        handler(neuerWert, alterWert) {
            console.log(neuerWert);
            console.log(alterWert);
        },
        tief: wahr
    }
}

Die obigen Druckergebnisse:

Die gedruckten newVal- und oldVal-Werte sind identisch. Daher kann die Tiefenüberwachung zwar Änderungen an Objekten überwachen, jedoch keine Änderungen an bestimmten Attributen des Objekts. Dies liegt daran, dass ihre Referenzen auf dasselbe Objekt/Array verweisen. Vue speichert keine Kopie des Werts vor der Mutation. [ vm.$watch Tiefenüberwachung ]

Wenn Sie Änderungen an einer einzelnen Eigenschaft eines Objekts überwachen möchten, gibt es zwei Möglichkeiten:

1. Überwachen Sie direkt die Eigenschaften des Objekts

betrachten:{
    vollständigerName.Vorname: Funktion(neuerWert,alterWert){
        console.log(neuerWert,alterWert);
    }
}

2. Wird mit berechneten Eigenschaften verwendet. „Computed“ gibt den Eigenschaftswert zurück, den Sie überwachen möchten, und „watch“ wird zur Überwachung verwendet.

berechnet: {
    VornameÄnderung() {
    gib dies zurück.vollständigerName.vorname
    }
},
betrachten:
    VornameÄnderung() {
        console.log(dieser.vollständigerName)
    }
}

Zusammenfassen

Sowohl die Überwachung als auch die Berechnung basieren auf dem Abhängigkeitsverfolgungsmechanismus von Vue. Wenn sich abhängige Daten (abhängige Daten: einfach verstanden als Instanzdaten, die unter Objekten wie Daten platziert sind) ändern, ändern sich alle zugehörigen Daten, die von diesen Daten abhängen, automatisch, d. h. die relevanten Funktionen werden automatisch aufgerufen, um die Datenänderung zu realisieren.

Wenn sich der Wert der Abhängigkeit ändert, können in „Watch“ einige komplexe Vorgänge ausgeführt werden, während die Abhängigkeit in „Computed“ lediglich ein Wert ist, der von einem anderen Wert abhängt, also eine Abhängigkeit vom Wert darstellt.

Anwendungsszenarien:

berechnet: wird verwendet, um komplexe logische Operationen zu verarbeiten; ein Datum wird von einem oder mehreren Daten beeinflusst; wird verwendet, um Situationen zu verarbeiten, die von Uhren und Methoden nicht oder nur unpraktisch verarbeitet werden können. Beispielsweise die Verarbeitung komplexer Ausdrücke in Vorlagen, das wechselnde Verhältnis zwischen der Anzahl der Artikel im Warenkorb und dem Gesamtbetrag usw.

Überwachung: Wird verwendet, um zu handhaben, wenn sich ein Attribut ändert und bestimmte Geschäftslogikvorgänge ausgeführt werden müssen oder wenn bei Datenänderungen asynchrone oder kostenintensive Vorgänge ausgeführt werden müssen; eine Datenänderung wirkt sich auf mehrere Daten aus. Es wird beispielsweise zur Überwachung von Routen, zur speziellen Verarbeitung von Eingabefeldwerten usw. verwendet.

Der Unterschied:

berechnet

• Wird aufgerufen, wenn die Anzeige oder zugehörige Daten, Eigenschaften und andere Attributdatenänderungen initialisiert werden.
• Die berechnete Eigenschaft ist nicht in den Daten enthalten. Es handelt sich um einen neuen Wert, der durch Berechnung auf Grundlage der Daten in Daten oder Eigenschaften ermittelt wurde. Dieser neue Wert ändert sich entsprechend der Änderung des bekannten Werts.
• Definieren Sie die Methode zum Berechnen des Attributs im berechneten Attributobjekt und rufen Sie sie in Form eines Attributzugriffs auf, genau wie beim Abrufen des Datenattributs im Datenobjekt.
• Wenn der berechnete Eigenschaftswert eine Funktion ist, wird standardmäßig die Methode get verwendet und es muss ein Rückgabewert vorhanden sein. Der Rückgabewert der Funktion ist der Eigenschaftswert der Eigenschaft.
• Standardmäßig wird das Berechnungsergebnis im Cache des berechneten Eigenschaftswerts gespeichert. Bei wiederholten Aufrufen wird das Berechnungsergebnis im Cache direkt abgerufen, solange die abhängigen Daten unverändert bleiben. Nur wenn sich die abhängigen Daten ändern, wird die Berechnung neu berechnet.
• In berechneten Eigenschaften gibt es eine Get-Methode und eine Set-Methode. Wenn sich die Daten ändern, wird die Set-Methode aufgerufen.

betrachten

• Es wird hauptsächlich verwendet, um Änderungen in bestimmten Daten zu überwachen, um bestimmte Geschäftslogikvorgänge auszuführen. Es kann als eine Kombination aus Berechnungen und Methoden betrachtet werden.
• Überwachte Datenquellen: Daten, Eigenschaften und berechnete Daten;
• Die Uhr unterstützt asynchronen Betrieb;
• Caching wird nicht unterstützt. Änderungen in den überwachten Daten lösen direkt entsprechende Vorgänge aus.
• Die Abhörfunktion hat zwei Parameter, der erste Parameter ist der letzte Wert und der zweite Parameter ist der Wert vor der Eingabe. Die Reihenfolge muss neuer Wert, alter Wert sein.

Oben finden Sie ausführliche Informationen zum Verständnis des Unterschieds zwischen berechnet und beobachtet in Vue. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!