Analysieren Sie den Unterschied zwischen berechnet und beobachtet in Vue

1. Einführung in die Computertechnik

computed dient zur Überwachung selbst definierter Variablen. Die Variable wird nicht in data deklariert, sondern direkt in computed definiert und kann direkt auf der Seite verwendet werden.

//Grundlegende Verwendung {{msg}}
<Eingabe v-Modell="Name" /> 
  
 //Berechnete Eigenschaften berechnet:{
 msg:Funktion(){
  gib diesen Namen zurück
 }
}

Wenn im Eingabefeld name geändert wird, ändert sich auch msg Nachrichtenwert. Dies liegt daran, dass computed sein eigenes Attribut msg überwacht und „msg“ sofort aktualisiert, sobald es feststellt, name ändert.

Hinweis: msg kann nicht in data definiert werden, sonst wird ein Fehler gemeldet.

1.1, Verwendung abrufen und festlegen

<Eingabe v-Modell="voll" ><br>
<Eingabe v-Modell="Erstes" > <br>
<input v-model="Sekunde" > 

Daten(){
 zurückkehren {
  zuerst: 'Schönheit',
  Zweitens: „Schwester“
 }
},
berechnet:{
 voll:
  get(){ // Die Rückruffunktion wird ausgeführt, wenn der aktuelle Eigenschaftswert gelesen werden muss, und der Wert der aktuellen Eigenschaft wird basierend auf den relevanten Daten berechnet und zurückgegeben return this.first + ' ' + this.second
   },
   set(val){ //Überwachen Sie die Änderungen des aktuellen Attributwerts, führen Sie es aus, wenn sich der Attributwert ändert, und aktualisieren Sie die zugehörigen Attributdaten let names = val.split(' ')
    this.first = Namen[0]
    diese.zweite = Namen[1]
  }
 }
}

Get-Methode: Wenn sich first und second Änderung ändern, wird die get Methode aufgerufen, um den Wert von full zu aktualisieren.

Set-Methode: Wenn der Wert von full geändert wird, wird set Methode aufgerufen val ist der letzte Wert von full .

1.2. Cache für berechnete Attribute

Wir können diesen Effekt auch erreichen, indem wir Daten durch Methoden zusammenfügen. Der Code lautet wie folgt.

<div> {{ voll() }} </div>
  
Daten(){
 zurückkehren {
  zuerst: 'Schönheit',
  Zweitens: „Schwester“
 }
},
Methoden:{
 voll(){
 gib dies.erstes + ' ' + dies.zweites zurück
 }
},

Auf einer Seite können Daten mehrfach verwendet werden. Wir implementieren computed und method zusammen und verweisen auf die Daten mehrfach auf der Seite. Sehen Sie sich die folgenden Effekte an.

<div>
  berechneter Wert:
  {{full}} {{full}} {{full}} {{full}}
</div>

<div>
  Methoden zur Wertberechnung:
  {{fullt}} ​​​​{{fullt}} ​​​​{{fullt}} ​​​​{{fullt}}
</div>

Daten(){
 zurückkehren {
  zuerst: 'Schönheit',
  Zweitens: „Schwester“
 }
},
berechnet:{
 voll:Funktion(){
  console.log('berechnet')
  gib dies.erstes + ' ' + dies.zweites zurück
 }
},
Methoden:{
 vollt(){
  console.log('Methode')
  gib dies.erstes + ' ' + dies.zweites zurück
 }
 }

Die laufenden Ergebnisse sind:

Den Ergebnissen zufolge ist es nicht schwer festzustellen, dass die mit der Methode erhaltenen Daten nach mehrmaliger Verwendung mehrmals neu berechnet werden müssen, die berechneten Eigenschaften jedoch nicht. Stattdessen werden sie basierend auf ihren reaktionsfähigen Abhängigkeiten zwischengespeichert und nur dann neu berechnet, wenn sich der Wert der abhängigen Eigenschaft ändert. Da weniger Berechnungen erforderlich sind, ist die Leistung besser.

2. Einführung in die Uhr

watch dient zum Überwachen der Datenänderungen in der Vue-Instanz. Einfach ausgedrückt bedeutet es, die in data deklarierten Daten zu erkennen. Es können nicht nur einfache Daten überwacht werden, sondern auch Objekte bzw. Objekteigenschaften.

Demo1: Überwachung einfacher Daten

<Eingabe v-Modell="Erstes" > <br>
  
Daten(){
 zurückkehren {
  zuerst: 'Schönheit',
  }
 },
betrachten:{
 erster( neuerWert , alterWert ){
 console.log('newVal',newVal) // der letzte Wert von first console.log('oldVal',oldVal) // der vorherige Wert von first}
},
// Wenn der Wert von first geändert wird, wird der neueste Wert sofort gedruckt

Demo2: Überwachungsobjekt

Wenn Sie ein Objekt überwachen, müssen Sie eine gründliche Überwachung durchführen.

<Eingabe v-Modell="pro.name">
  
Daten(){
 zurückkehren {
  pro:
   Name: „Qianqian“,
   Alter:'18'
   }
  }
 },
betrachten:{
 pro:
  handler(alterWert,neuerWert){
   console.log('neuerWert',neuerWert)
   console.log('alterWert',alterWert)
  },
  tief:wahr,
 }
},

Beim Ändern von per.name wird festgestellt, dass die Werte von newVal und oldVal identisch sind. Dies liegt daran, dass die darin gespeicherten Zeiger auf dieselbe Stelle zeigen. Daher kann Deep Monitoring zwar Änderungen an Objekten überwachen, aber nicht überwachen, welches spezifische Attribut sich geändert hat.

Demo3: Überwachen Sie eine einzelne Eigenschaft eines Objekts

// Methode 1: Direkter Verweis auf die Eigenschaften des Objekts <input v-model="per.name">
  
Daten(){
 zurückkehren {
  pro:
   Name: „Qianqian“,
   Alter:'18'
   }
  }
 },
betrachten:{
 'per.name':Funktion(neuerWert,alterWert){
   console.log('neuerWert->',neuerWert)
   console.log('alterWert->',alterWert)
  }
},

Sie können computed auch wie folgt als Zwischenkonvertierung verwenden:

// Methode 2: Mit berechneten
<Eingabe v-Modell="pro.name">
  
Daten(){
 zurückkehren {
  pro:
   Name: „Qianqian“,
   Alter:'18'
   }
  }
 },
betrachten:{
 proName(){
  console.log('Name geändert')
  }
},
berechnet:{
 perName:Funktion(){
  gib dies.per.name zurück
 }
},

Demo4: Hören Sie sich den von props Komponente übergebenen Wert an

Requisiten:{
 mm:Zeichenfolge
},
//Verwenden Sie nicht unmittelbar
betrachten:{
 mm(neuesV,altesV){
   console.log('neuesV',neuesV)
   console.log('altesV',altesV)
 }
}

//Verwenden Sie sofort
betrachten:{
 mm:{
  sofort:wahr,
  handler(neuesV,altesV){
   console.log('neuesV',neuesV)
   console.log('altesV',altesV)
  }
}

Wenn immediate nicht verwendet wird, wird beim ersten Laden der Seite der Druck in den von watch überwachten mm nicht ausgeführt.

Bei Verwendung von immediate wird das Ergebnis auch beim ersten Laden ausgedruckt: newV 11 oldV undefined .

Die Hauptfunktion von immediate besteht darin, die Rückruffunktion sofort auszulösen, wenn die Komponente geladen wird.

3. Der Unterschied zwischen den beiden

3.1. Für berechnete

• Die computed überwachten Daten sind nicht in data deklariert
• computed unterstützt keine Asynchronität. Wenn in computed eine asynchrone Operation stattfindet, ist es unmöglich, Datenänderungen zu überwachen.
• computed hat einen Cache. Wenn die Seite erneut gerendert wird und der Wert unverändert bleibt, wird das vorherige Berechnungsergebnis ohne Neuberechnung direkt zurückgegeben.
• Wenn eine Eigenschaft aus anderen Eigenschaften berechnet wird, hängt diese Eigenschaft von anderen Eigenschaften ab. Verwenden Sie im Allgemeinen computed
• Wenn computed Eigenschaftswert eine Funktion ist, wird standardmäßig get Methode verwendet. Wenn es sich bei dem Attributwert um einen Attributwert handelt, verfügt das Attribut über eine get und set -Methode, und set Methode wird aufgerufen, wenn sich die Daten ändern.

berechnet:{
 //Der Eigenschaftswert ist die Funktion perName:function(){
  gib dies.per.name zurück
 },
 //Der Attributwert ist der Attributwert full:{
  erhalten(){ },
  setze(Wert){ }
 }
},

3.2. Für die Uhr

• Die überwachten Daten müssen in data oder props deklariert werden
• Unterstützt asynchronen Betrieb
• Ohne Caching wird die Seite neu gerendert und der Wert ausgeführt, auch wenn er sich nicht ändert.
• Wenn sich ein Attributwert ändert, muss die entsprechende Operation ausgeführt werden
• Wenn sich die überwachten Daten ändern, werden andere Vorgänge ausgelöst. Die Funktion hat zwei Parameter:

immediate : Die Komponente wird geladen und die Callback-Funktion wird sofort ausgelöst
deep : Tiefenüberwachung, hauptsächlich für komplexe Daten. Wenn Sie beispielsweise ein Objekt überwachen, fügen Sie eine Tiefenüberwachung hinzu, und jede Änderung des Attributwerts wird sie auslösen.
Hinweis: Nachdem Sie dem Objekt Deep Listening hinzugefügt haben, sind die alten und neuen Ausgabewerte identisch.

Beim erneuten Rendern computed Seite wird die Berechnung nicht wiederholt, watch wird jedoch neu berechnet, sodass computed Rechenleistung höher ist.

IV. Anwendungsszenarien

Wenn numerische Berechnungen erforderlich sind und von anderen Daten abhängen, sollte computed verwendet werden, da mit der Caching-Funktion von computed eine Neuberechnung bei jedem Abrufen eines Werts vermieden werden kann.

Wenn Sie asynchrone Vorgänge oder Vorgänge mit hohem Overhead bei Datenänderungen ausführen müssen, sollten Sie watch verwenden. computed unterstützt keine Asynchronität. Wenn Sie die Häufigkeit der Ausführung von Vorgängen begrenzen müssen, können Sie computed als Zwischenzustand verwenden.

Zusammenfassen:

Dies ist das Ende dieses Artikels über die Analyse des Unterschieds zwischen Vues computed und watch . Weitere Informationen zum Unterschied zwischen Vues computed und watch 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!