setup+ref+reactive implementiert Vue3-Reaktionsfähigkeit

Das Setup wird zum Schreiben kombinierter APIs verwendet. Die internen Daten und Methoden müssen zurückgegeben werden, bevor die Vorlage sie verwenden kann. Im vorherigen vue2 können die von data zurückgegebenen Daten direkt für die bidirektionale Bindung verwendet werden. Wenn wir den Datentyp im Setup direkt an die bidirektionale Bindung binden, stellen wir fest, dass die Variable nicht in Echtzeit reagieren kann. Sehen wir uns als Nächstes an, wie das Setup die Reaktionsfähigkeit der Daten implementiert.

1. Referenz

Die benutzerdefinierten Attribute im Setup reagieren nicht, daher wird ref eingeführt. Ref bindet den Attributwert über einen Proxy in einen Proxy ein. Der Proxy enthält ein Objekt, das den grundlegenden Datentyp reagieren lässt. Es muss vor der Verwendung eingeführt werden.

Beispiel 1: Ref-Verwendung

<Vorlage>
 <div>
  <input type="text" v-model="stimmung">
  {{Stimmung}}
 </div>
</Vorlage>
<Skript>
importiere { ref } von "vue"
Standard exportieren{
 aufstellen(){
  let mood = ref("Ich bin gerade schlecht gelaunt!")
  setzeTimeout(()=>{
   mood.value = „Die Stimmung soll so schön werden wie der Mensch“
  },3000)
  zurückkehren {
   Stimmung
  }
 }
}
</Skript>

An dieser Stelle können Sie die Stimmung in der Setup-Vorlage nach Belieben bearbeiten, um eine Reaktion in Echtzeit sicherzustellen. Das Beispiel fügt beim Ändern des Stimmungswerts einen Wert hinzu, da ref wie folgt funktioniert:

let mood = ref("Ich bin gerade schlecht gelaunt!")

Ändern in: let mood = proxy({value:"Ich bin gerade schlecht gelaunt!"})

Reaktiv

Der obige Verweis macht den grundlegenden Datentyp reaktionsfähig, aber wenn wir ihn in Daten vom Referenztyp ändern, schlägt er fehl. Also wurde reaktiv eingeführt.

Reactive verpackt die Referenztypdaten durch die zugrunde liegende Verpackung in den Proxy. Das Nutzungsprinzip ist wie folgt:

lass mich = reaktiv({
 einzeln:wahr,
 will: „einen herzlichen Mann, der so warm ist wie ein Ofen“
})

// Das Ergebnis ist let me = proxy : { single: true, want:"Ein warmer Mann, der so warm ist wie ein Ofen" }

Verwenden Sie beim Zitieren einfach me.want.

Beispiel 2: Reaktive Nutzung

<Vorlage>
 <div>
  {{ich.will}}
 </div>
</Vorlage>
<Skript>
importiere { ref , reaktiv } von "vue"
Standard exportieren{
 aufstellen(){
  lass mich = reaktiv({
   einzeln:wahr,
   will: „einen herzlichen Mann, der so warm ist wie ein Ofen“
  })
  setzeTimeout(()=>{
   me.want = "Im Sommer schmilzt man leicht dahin"
  },3000)
  zurückkehren {
   Mich
  }
 }
}
</Skript>

Die Reaktionsfähigkeit der Daten in vue2 kann vollständig durch Setup + Ref + Reactive realisiert werden, sodass Setup die Daten vollständig ersetzen kann.

3. toRefs und toRef-Anwendung

setup + ref + reactive implementiert die Datenreaktivität, und die ES6-Destrukturierung kann nicht verwendet werden, wodurch die Reaktivität verloren geht. Daher ist eine Dekonstruktion von toRefs erforderlich und muss bei Verwendung zuerst eingeführt werden.

Es funktioniert wie folgt:

importiere { ref , reaktiv, toRefs } von "vue"
lass mich = reaktiv({
 einzeln:wahr,
 will: „einen herzlichen Mann, der so warm ist wie ein Ofen“
})
//Ausführen als let me = Proxy: { single: true, want:"Ein warmherziger Mann, der so warm ist wie ein Ofen" }

const { single, wollen } = toRefs( ich )
// Als einzelner ausführen: Proxy({ value:true })
will: Proxy ({Wert: „ein warmer Mann, so warm wie ein Ofen“})

toRefs zerlegt einzelne und gewünschte Proxys in zwei Proxys, sodass es reaktionsfähig ist.

Beispiel 3: toRefs destrukturiert Daten

<Vorlage>
 <div>
  {{wollen}}
  <Eingabetyp="Text" v-Modell="wollen">
 </div>
</Vorlage>
<Skript>
importiere { ref , reaktiv, toRefs } von "vue"
Standard exportieren{
 aufstellen(){
  lass mich = reaktiv({
   einzeln:wahr,
   will: „einen herzlichen Mann, der so warm ist wie ein Ofen“
  })
  setzeTimeout(()=>{
   me.want = "Im Sommer schmilzt man leicht dahin"
  },3000)
  // dekonstruieren const {single,want} = toRefs(me)
   zurückkehren {
    einzel,
    wollen
   }
  }
}
</Skript>

toRef-Funktion: Gibt eine Eigenschaft eines Objekts als Referenz zurück. Es ist schwer zu verstehen. Sie können die Ergebnisse ausdrucken und anzeigen, um es leichter verständlich zu machen.

lass mich = reaktiv({
 einzeln:wahr,
 will: „einen herzlichen Mann, der so warm ist wie ein Ofen“
})
lass lv = toRef(ich, 'Liebe')
console.log('Liebe',Liebe);
//Ergebnis drucken ObjectRefImpl {
 __v_isRef: wahr
 _Schlüssel: "Liebe"
 _object: Proxy {single: true, want: "Ein herzlicher Mann, der so warm ist wie ein Ofen"}
 Wert: undefiniert
 [[Prototyp]]: Objekt
}

toRef wird verwendet, um Werte zwischen Komponenten zu übergeben und optionale Parameter zu verarbeiten. Beim Ausführen prüft es zunächst, ob Liebe in mir vorhanden ist. Wenn dies der Fall ist, erbt es Liebe in mir. Wenn dies nicht der Fall ist, erstellt es eine Liebe, dekonstruiert sie und weist sie der Variablen lv zu.

Beispiel 4: toRef-Verwendung

<Vorlage>
 <div>
  {{wollen}}
 <Eingabetyp="Text" v-Modell="wollen">
</div>
</Vorlage>
<Skript>
importiere { ref , reaktiv, toRefs, toRef } von "vue"
Standard exportieren{
 aufstellen(){
  lass mich = reaktiv({
   einzeln:wahr,
   will: „einen herzlichen Mann, der so warm ist wie ein Ofen“
  })
 setzeTimeout(()=>{
  me.want = "Im Sommer schmilzt man leicht dahin"
 },3000)
 const { single, wollen } = toRefs(ich)
 const Liebe = toRef(ich,'Liebe')
 console.log('Liebe',Liebe);
 zurückkehren {
  einzel,
  wollen
  }
 }
}
</Skript>

IV. Fazit

„ref“ macht grundlegende Datentypen reaktionsfähig, während „reactive“ Referenztypdaten reaktionsfähig macht. setup + ref + reactive implementiert die Datenreaktionsfunktion in vue2 vollständig.

toRefs dekonstruiert reaktiv gewrappte Daten, toRef wird für optionale Parameter verwendet.

Oben habe ich Ihnen erklärt, wie Sie die Reaktionsfunktion von vue3 über setup+ref+reactive realisieren können. Ich hoffe, es wird Ihnen helfen. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!