So verstehen Sie den Unterschied zwischen ref toRef und toRefs in Vue3

Vue3 hat mehrere neue Methoden zum Erstellen von responsiven Daten hinzugefügt. Natürlich sind auch ihre jeweiligen Funktionen unterschiedlich. Jede Methode hat ihr eigenes Anwendungsszenario. Heute werden wir darüber sprechen, was ref toRef und toRefs sind. Welche Unterschiede gibt es in der Anwendung? Wie verwendet man es am besten?

1. Grundlagen

1.Referenz

(1) Generieren Sie reaktionsfähige Daten vom Werttyp und ändern Sie den Wert über .value

<Vorlage>
 <div>{{ Altersreferenz }}</div>
</Vorlage>

<Skript>
importiere { ref } von 'vue'
Standard exportieren {
 aufstellen() {
  const AlterRef = ref(20)

  setzeIntervall(() => {
   Altersreferenzwert += 1
  }, 1000)
  
  zurückkehren {
   Altersreferenz
  }
 },
}
</Skript>

Der obige Code definiert eine ageRef-Variable und erhöht ageRef jede Sekunde um 1. Der auf der Seite angezeigte Wert wird ebenfalls um 1 erhöht.

(2) Kann in reaktiven

Ändern Sie den obigen Code wie folgt: Importieren Sie die reaktive Definitionsvariable, importieren Sie die Ref-Definitionsvariable in reaktiv und zeigen Sie die reaktive Variable in der Vorlage an. Der endgültige Effekt ist der gleiche wie oben (1).

<Vorlage>
 <div>{{ info.age }}</div>
</Vorlage>

<Skript>
importiere { ref, reaktiv } von 'vue'
Standard exportieren {
 aufstellen() {
  const AlterRef = ref(20)
  const info = reaktiv({
   Alter: ageRef
  })
  setzeIntervall(() => {
   Altersreferenzwert += 1
  }, 1000)
  
  zurückkehren {
   Info
  }
 },
}
</Skript>

(3) Kann verwendet werden, um Dom zu erhalten

<Vorlage>
 <div ref="eleDom">ref-dom-test</div>
</Vorlage>

<Skript>
importiere { ref, onMounted } von 'vue'
Standard exportieren {
 aufstellen() {
  const eleDom = ref(null)
  beimMounted(() => {
   console.log(eleDom.value.innerHTML) // ref-dom-test
  })
  zurückkehren {
   eleDom 
  }
 },
}

Die Konsole des obigen Codes gibt „ref-dom-test“ aus, was anzeigt, dass das Dom-Element abgerufen wurde.
Um das Dom-Element zu erhalten, müssen die folgenden Regeln eingehalten werden

Der definierte Ref-Variablenname muss mit dem Wert im Vorlagen-Ref übereinstimmen, wie z. B. eleDom im Code.

2. toRef

• Requisiten für ein responsives Objekt
• Erstellen Sie einen Schiedsrichter mit Reaktionsfähigkeit
• Die beiden pflegen eine Referenzbeziehung

Schauen wir uns den folgenden Code an

<Vorlage>
 <div>{{ staat.alter }} --- {{ ageRef }}</div>
</Vorlage>

<Skript>
importiere { toRef, reaktiv } von 'vue'
Standard exportieren {
 aufstellen() {
  const state = reaktiv({
   Name: 'JL',
   Alter: 18
  })
  const ageRef = toRef(Staat, 'Alter')
  setzeTimeout(() => {
   Staat.Alter = 20
  }, 1000)
  
  setzeTimeout(() => {
   Altersreferenzwert = 21
  }, 2000)
  
  zurückkehren {
   Zustand,
   Altersreferenz
  }
 },
}
</Skript>

Im obigen Code wird toRef verwendet, um die Alterseigenschaft von state in eine reaktionsfähige Variable umzuwandeln. Dann wird nach 1 Sekunde der Alterswert von state auf 20 geändert, woraufhin ageRef ebenfalls 20 wird. Nach 2 Sekunden wird der Wert von ageRef auf 21 geändert, woraufhin der Alterswert von state ebenfalls 21 wird, was darauf hinweist, dass die beiden eine gegenseitige Referenzbeziehung aufrechterhalten.

toRef dient der Reaktionsfähigkeit, nicht gewöhnlichen Objekten. Wenn es für Nicht-Reaktionsfähigkeit verwendet wird, reagiert das Ausgabeergebnis nicht.

3. zu Referenzen

• Konvertieren eines responsiven Objekts in ein normales Objekt
• Jede Eigenschaft eines Objekts ist eine entsprechende Referenz
• Die beiden pflegen eine Referenzbeziehung

Schauen wir uns den folgenden Code an

<Vorlage>
 <div>{{ Name }}---{{ Alter }}</div>
</Vorlage>

<Skript>
importiere { reaktiv, toRefs } von 'vue'
Standard exportieren {
 aufstellen() {
  const state = reaktiv({
   Name: 'JL',
   Alter: 18
  })

  const stateRefs = toRefs(Zustand)

  setzeTimeout(() => {
   Staat.Alter = 20
  }, 1000)

  setzeTimeout(() => {
   stateRefs.age.value = 21
  }, 2000)

  StateRefs zurückgeben
 },
}
</Skript>

Im obigen Code wird toRefs verwendet, um den Status in ein normales Objekt umzuwandeln. Zu diesem Zeitpunkt können stateRefs direkt zurückgegeben und Name und Alter direkt in der Vorlage aufgerufen werden. Dann wird nach 1 Sekunde der Alterswert des Status auf 20 geändert und der Alterswert auf der Seite wird ebenfalls 20; nach 2 Sekunden wird der Wert des Namens in stateRefs auf 21 geändert und der Alterswert auf der Seite wird ebenfalls 21, was darauf hinweist, dass die beiden eine gegenseitige Referenzbeziehung aufrechterhalten.

Nachdem toRefs das responsive Objekt in ein normales Objekt umgewandelt hat, verfügt jedes Attribut über einen responsiven Verweis. Zu diesem Zeitpunkt müssen Sie .value verwenden, um seinen Wert abzurufen.

4. Beste Verwendung

• reaktiv bedeutet objektreaktiv, ref bedeutet werttypreaktiv
• Gibt toRefs(state) oder toRef(state, 'xxx') im Setup zurück --- (damit state.xxx nicht in der Vorlage verwendet wird)
• Ref-Variablen werden mit xxxRef benannt
• Wenn die zusammengesetzte Funktion ein responsives Objekt zurückgibt, verwenden Sie toRefs

Zum Beispiel:

<Vorlage>
 <div>x:{{x}} y:{{y}}</div>
</Vorlage>

<Skript>
importiere { reaktiv, toRefs } von 'vue'
Standard exportieren {
 aufstellen() {
  Funktion test() {
   const state = reaktiv({
    x: 1,
    y: 2
   })
   zurück zu Refs (Status)
  }
  const {x, y} = test()

  setzeTimeout(() => {
   x.Wert = 2
  }, 1000)

  zurückkehren {
   X,
   j
  }
 }
}
</Skript>

Im obigen Code wird der Status des reagierenden Objekts in der Testfunktion definiert, in ein normales Objekt konvertiert und über toRefs zurückgegeben. Zu diesem Zeitpunkt kann die Struktur zugewiesen werden und der Wert reagiert.

2. Ausführlich

1. Warum brauchen wir ref?

Wie oben erwähnt, können mit „reactive“ und „toRef“ auch Werttypen in „responsive“ konvertiert werden. Warum brauchen wir also immer noch „ref“?

• Werttypen reagieren nicht (Proxy)
• setup(), computed()... können alle Werttypen zurückgeben. Wenn Vue ref nicht definiert, erstellen Benutzer, wenn sie reaktionsfähige Werttypen benötigen, Refs auf andere Weise (reactive/toRef, reactive/toRefs), was den Code verwirrender macht.

2. Warum braucht ref .value

Warum muss ref einen .value hinzufügen, um den Wert zu erhalten? Warum ist das so problematisch?

• ref ist ein Objekt (verliert nicht an Reaktionsfähigkeit), value speichert den Wert
• Die Reaktionsfähigkeit wird durch das Abrufen und Festlegen von .value-Eigenschaften erreicht.
• .value wird nicht benötigt, wenn es für reaktive und Vorlagen verwendet wird (Vue-Kompilierung), ist aber in anderen Fällen erforderlich

3. Warum brauchen wir toRef und toRefs?

• Ursprüngliche Absicht: Objektdaten dekonstruieren, ohne die Reaktionsfähigkeit zu verlieren
• Prämisse: Es handelt sich um responsive Objekte, nicht um gewöhnliche Objekte
• Ergebnis: Keine Schaffung von Reaktionsfähigkeit, nur Fortsetzung der Reaktionsfähigkeit

Dies ist das Ende dieses Artikels zum Verständnis des Unterschieds zwischen ref toRef und toRefs in Vue3. Weitere relevante Vue3 ref toRef- und toRefs-Inhalte 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!