Einführung in die reaktive Funktion toRef-Funktion ref-Funktion in Vue3

Reaktive Funktion

„reaktiv“ wird verwendet, um reaktionsfähige Daten zu definieren (die als Ersatz für Daten verstanden werden können).

Verwendung:

importiere { reaktiv } von 'vue'

verwenden:

const state = reaktiv({
    Parametername: Parameterwert})

Zugriff: Status.Parametername

Zugriff: Status.Parametername

toRef-Funktion (einfach verstehen)

toRef: Extrahieren eines Felds aus den Antwortdaten in separate Antwortdaten

Verwendung:

import import { toRef } von 'vue'

verwenden:

const state = reaktiv({
    Zahl: 0
})
const num = toRef (Status (Antwortdaten), „num-Attributname“)
Zahl:{
    Wert: 0
}
Ref kann tatsächlich als Datentyp verstanden werden: {value: value}

Zugriff: num.value===0

Notiz:

HTML: Sie müssen keinen Wert schreiben, wenn Sie responsive Daten verwenden

Der Wert muss in js geschrieben werden

Ref-Funktion

Definieren von reaktionsfähigen Daten

{
    Wert:Wert}

Direkte Definition mittels

importiere importiere {ref} von 'vue'
aufstellen(){
Definieren Sie const num = ref({a:1,b:2})  
    Zahl:{
       Wert: {a:1,b:2}
    }
}

Zugriff: num.value===0

reaktiv: Gilt für mehrere Daten, ref gilt für einzelne Daten

DOM abrufen

<Vorlage>
  <div ref="Ziel">123</div>
</Vorlage>
Skript
importiere {ref} von 'vue'
aufstellen(){
   const Ziel = ref(null)   
   return {Ziel} 
   target.value ist das entsprechende DOM   
}

Komponenteninstanzobjekt abrufen

ref wird für native Tags verwendet, um Dom zu erhalten

ref wird für Komponenten-Tags verwendet, um Komponenteninstanzobjekte abzurufen

Die Verwendung ist die gleiche wie beim Abrufen von DOM

<Vorlage>
  <Komponenten-Tag ref="target">123</Komponenten-Tag>
</Vorlage>
Skript
importiere {ref} von 'vue'
aufstellen(){
   const Ziel = ref(null)   
   return {Ziel} 
   target.value ist das Komponenteninstanzobjekt}

Oben finden Sie den detaillierten Inhalt der Einführung der reaktiven Funktion toRef-Funktion ref-Funktion in Vue3. Weitere Informationen zu Vue3-Funktionen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!