Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3

Die Verwendung von „Computed“ in vue3. Da vue3 mit der optionalen API von vue2 kompatibel ist, können Sie die Schreibmethode von vue2 direkt verwenden. Dieser Artikel stellt hauptsächlich die neue Verwendung von „Computed“ in vue3 vor und vergleicht sie mit der Schreibmethode in vue2, damit Sie die neue Verwendung von „Computed“ in vue3 schnell beherrschen.

Wenn Sie „computed“ in der kombinierten API verwenden, müssen Sie es zuerst importieren: „import { computed } from „vue“. Nach der Einführung gibt es zwei Arten von Parametern, die an Calculated übergeben werden können: Rückruffunktion und Optionen. Sehen Sie, wie es im Detail verwendet wird?

1. Funktionales Schreiben

In vue2 wird „Berechnet“ wie folgt geschrieben:

berechnet:{
 Summe(){
  gib dies.num1+ dies.num2 zurück
 }
}

Wenn Sie in vue3 die optionale API verwenden, können Sie sie auch auf diese Weise schreiben. Achten Sie hauptsächlich auf die Verwendung der kombinierten API.

Beispiel 1: Summe

importiere { ref, berechnet } von "vue"
Standard exportieren{
 aufstellen(){
  Konstante Nummer1 = Ref(1)
  Konstante Nummer2 = Ref(1)
  lass Summe = berechnet(()=>{
   gibt num1.value + num2.value zurück
  })
 }
}

Beim Aufruf von „Berechnet“ wird eine Pfeilfunktion übergeben und der Rückgabewert als Summe verwendet. Es ist einfacher zu verwenden als zuvor. Wenn Sie mehrere Attributwerte berechnen müssen, rufen Sie es einfach direkt auf. wie:

lass Summe = berechnet(()=>{
 gibt num1.value + num2.value zurück
 })
lass mul = berechnet(()=>{
 returniere Num1.Wert * Num2.Wert
 })

Dieses Beispiel ist zu einfach. Wenn Sie es nicht verstehen, können Sie das vollständige Beispiel 1 am Ende des Artikels lesen.

2. Optionen schreiben

Berechnete Eigenschaften haben standardmäßig nur Getter, bei Bedarf können aber auch Setter bereitgestellt werden. Die Verwendung in vue2 ist wie folgt:

berechnet:{
 mul:{
  get(){ // Wird ausgelöst, wenn sich der Wert von num1 ändert return this.num1 * 10
  },
  set(value){ // Wird ausgelöst, wenn der Mul-Wert geändert wird this.num1 = value /10
  }
 }
}

Das Attribut „mul“ verstärkt „num1“ um 10. Wenn der Wert von „mul“ geändert wird, ändert sich auch „num1“ entsprechend.

In vue3:

lass mul = berechnet({
 erhalten:()=>{
  returniere num1.value *10
 },
 set:(Wert)=>{
  gibt num1.value = Wert/10 zurück
 }
})

Diese beiden Schreibweisen sind nicht ganz gleich, bei genauerem Hinsehen erkennt man jedoch, dass es kaum einen Unterschied gibt und auch die Get- und Set-Aufrufe sind gleich.

Der Code in diesem Beispiel ist einfach. Wenn Sie ihn nicht ganz verstehen, können Sie sich das vollständige Beispiel 2 am Ende des Artikels ansehen.

Vollständiges Beispiel 1:

<Vorlage>
 <div>
  {{num1}} + {{num2}} = {{sum}}
  <br>
  <button @click="num1++">num1 Selbstinkrement</button>
  <button @click="num2++">num2 Selbstinkrement</button>
 </div>
</Vorlage>
<Skript>
importiere { ref, berechnet } von "vue"
Standard exportieren{
 aufstellen(){
  Konstante Nummer1 = Ref(1)
  Konstante Nummer2 = Ref(1)
  lass Summe = berechnet(()=>{
   gibt num1.value + num2.value zurück
  })
  zurückkehren {
   Zahl1,
   Zahl2,
   Summe
  }
 }
}
</Skript>

Vollständiges Beispiel 2:

<Vorlage>
 <div>
  {{num1}} + {{num2}} = {{Summe}}<br>
  <button @click="num1++">num1 Selbstinkrement</button>
  <button @click="num2++">num2 Selbstinkrement</button>
  <br>
  {{num1}} * 10 = {{mul}}
  <button @click="mul=100">Wert ändern</button>
 </div>
</Vorlage>
<Skript>
importiere { ref, berechnet } von "vue"
Standard exportieren{
 aufstellen(){
  Konstante Nummer1 = Ref(1)
  Konstante Nummer2 = Ref(1)

  lass Summe = berechnet(()=>{
   gibt num1.value + num2.value zurück
  })
  lass mul = berechnet({
   erhalten:()=>{
    returniere num1.value *10
   },
   set:(Wert)=>{
    gibt num1.value = Wert/10 zurück
   }
  })
  zurückkehren {
   Zahl1,
   Zahl2,
   Summe,
   mul
  }
 }
}
</Skript>

3. Übergabe berechneter Parameter

Wie schreibt man einen Parameter beim Berechnen einer Eigenschaft?

<Vorlage>
 <div>
  <div v-for="(Element,Index) in arr" :Schlüssel="Index" @click="sltEle(Index)">
   {{Artikel}}
  </div>
 </div>
</Vorlage>
<Skript>
importiere { ref, berechnet, reaktiv } von "vue"
Standard exportieren{
 aufstellen(){
  const arr = reaktiv([
   „Haha“, „Hehe“
  ])
  const sltEle = berechnet( (index)=>{
   Konsole.log('Index',Index);  
  })
  zurückkehren {
   arr,sltEle
  }
 }
}
</Skript>

Wenn du es direkt so schreibst, tritt beim Ausführen ein Fehler auf: Uncaught TypeError: $setup.sltEle ist keine Funktion.

Grund:

Die berechnete Eigenschaft hat keinen angegebenen Rückgabewert. Wir rufen eine Funktion auf, aber „berechnet“ gibt keine Funktion zurück, daher wird ein Fehler gemeldet: „sltEle ist keine Funktion.“

Lösung:

Innerhalb der berechneten Eigenschaft muss eine Funktion zurückgegeben werden. Ändern Sie den Code wie folgt:

const sltEle = berechnet( ()=>{
 Rückgabefunktion (Index) {
  Konsole.log('Index',Index);
 }
})

Dies ist das Ende dieses Artikels über die neue berechnete Nutzung in vue3. Weitere relevante Inhalte zur berechneten Nutzung von vue3 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!