So lösen Sie die Probleme mit Ref und Reactive in Vue3

Fragen zu Ref und Reaktiv

Wenn Sie Vue3 verwendet haben, wissen Sie, dass es in Vue3 zwei gibt, die sehr häufig verwendet werden reaktive APIs: reaktiv und ref. Sie machen die Daten, die wir verfolgen möchten, reaktionsfähig.

Uns wurde immer gesagt, dass ref verwendet werden kann, um reaktive Versionen sowohl von primitiven als auch von Referenztypen zu erstellen. Bei Referenztypen wird die unterste Ebene für eine reaktionsfähige Verarbeitung ebenfalls in eine reaktive Ebene konvertiert. Warum müssen Sie in diesem Fall reaktiv verwenden? Würde es nicht ausreichen, einfach für alles ref zu verwenden?

Obwohl auf die von ref erstellten reaktiven Daten über .value im Skript zugegriffen werden muss, hat dies in diesem Fall keine großen Auswirkungen auf das Programm. Die Vorlage fügt automatisch .value hinzu, sodass in der Vorlage kein .value-Zugriff verwendet werden muss.

Da es im Grunde keinen Unterschied zwischen den beiden gibt, die reaktive API aber immer noch verfügbar ist, gibt es Szenarien, die reaktiv funktionieren können, ref jedoch nicht?

Ein kurzes Verständnis von ref und reaktiv

Lassen Sie uns zunächst kurz diese beiden APIs verstehen.

reactive

Gibt eine reaktive Kopie des Objekts zurück. Reaktive Transformationen sind „tief“ – sie wirken sich auf alle verschachtelten Eigenschaften aus. Normalerweise schreiben wir so.

const obj = reactive({ count: 0 })

und direkt einsetzbar.

const count = obj.count

ref

Nimmt einen internen Wert an und gibt ein reaktives und veränderliches Referenzobjekt zurück. Das Ref-Objekt verfügt nur über eine .value-Eigenschaft, die auf den inneren Wert zeigt. Normalerweise schreiben wir so.

const data = ref(xxx)

Beim Zitieren wird es normalerweise über data.value zitiert.

const dataValue = data.value

Indem wir den Quellcode von Vue3 verfolgen, können wir beweisen, dass die reaktive Methode tatsächlich verwendet wird, wenn wir die Ref-Methode aufrufen, um reaktive Daten zu definieren, wenn der Parameter ein Objekttyp ist. Das heißt, die Eigenschaft über data.value wird durch die reaktive Methode erstellt.

Hinweis:

Was reaktiv mit ref machen kann, kann auch gemacht werden, und es wird immer noch mit reaktiv gemacht

#🎜 🎜#wenn der Parameter von ref ein Objekt ist, wird die reaktive Methode verwendet

Wenn in Vue3 die Objekttypdaten responsiv gemacht werden, können sowohl reaktiv als auch ref verwendet werden, und ref wird intern übergeben durch reaktive Unterstützung. Mit anderen Worten: Was Sie mit Reaktiv machen können, kann ich mit Ref machen.

Einfach ausgedrückt ist Ref gekapselt und auf Reaktiv erweitert, sodass Ref in Vue3 das tun kann, was Reaktiv kann, und Ref kann das tun, was Reaktiv nicht kann.

Mein persönliches Verständnis ist, dass ref Syntaxzucker für reaktiv ist. Zum Beispiel: ref(1) entspricht reaktiv({Wert: 1});

Normalerweise Projektreferenz ist ein Shuttle, ja, das Problem ist nicht groß #ref data Reaktionsfreudiges Zuhören. Die Ref-Funktion übergibt einen Wert als Parameter, normalerweise einen Basisdatentyp, und gibt ein reaktionsfähiges Ref-Objekt basierend auf dem Wert zurück. Sobald der Wert im Objekt geändert und darauf zugegriffen wird, wird er verfolgt, genau wie in unserem umgeschriebenen Beispiel The Der Code ist derselbe. Durch Ändern des Werts von count.value können Sie das erneute Rendern der Vorlage auslösen und den neuesten Wert anzeigen. Wird zum Definieren komplexerer Datentypen verwendet, aber nach der Definition reagieren die darin enthaltenen Variablen nicht mehr Objektdaten

Sie müssen also die toRefs-Funktion verwenden, um sie in ein reaktionsfähiges Datenobjekt umzuwandeln

# 🎜🎜#

Konvertieren Sie den geschriebenen Code mit Referenz oben in reaktiven Code

<template>
  
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="sayName">按钮</button>
</template>

<script lang="ts">
import {ref,computed} from &#39;vue&#39; 

export default {
  name: &#39;App&#39;,
  setup(){
    const name = ref(&#39;zhangsan&#39;)
    const birthYear = ref(2000)
    const now = ref(2020)
    const age = computed(()=>{
      return now.value - birthYear.value
    })
    const sayName = () =>{
      name.value = &#39;I am &#39; + name.value
    }
    return {
      name,
      sayName,
      age
    }
  }
}
</script>

Das obige ist der detaillierte Inhalt vonSo lösen Sie die Probleme mit Ref und Reactive in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!