Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

1. Ref und reaktiv

Denken Sie daran: ref ist auch von Natur aus reaktiv, ref(obj) ist gleichbedeutend mit reactive({value: obj})

• Die Möglichkeit, reaktionsfähige Daten in Vue3 zu implementieren, besteht darin, ref und reactive zu verwenden. Die sogenannte Reaktionsfähigkeit bedeutet, dass Schnittstelle und Daten synchronisiert sind und in Echtzeit aktualisiert werden können.
• In vue2 wird die Reaktionsfähigkeit durch defineProperty erreicht, während sie in vue3 durch ES6 Proxy erreicht wird.

1. reaktiv

• Der reaktive Parameter muss ein Objekt sein, einschließlich JSON-Daten und Arrays, sonst reagiert er nicht.
• Wenn Sie andere Objekte (z. B. ein Zeitobjekt) an reactive übergeben, wird die geänderte Objektschnittstelle standardmäßig nicht automatisch aktualisiert. Wenn Sie sie aktualisieren möchten, können Sie das Problem lösen, indem Sie das Objekt neu zuweisen.

2.Referenz

Da wir reaktiv sind, warum brauchen wir ref? Wenn wir nur möchten, dass eine Variable reagiert, wäre es mühsam, reaktiv zu verwenden. Daher bietet vue3 die Ref-Methode zur Überwachung einfacher Werte. Dies bedeutet jedoch nicht, dass Ref nur einfache Werte übergeben kann. Die zugrunde liegende Schicht ist reaktiv und verfügt daher über alles, was reaktiv hat. Es ist das gleiche alte Sprichwort:

Denken Sie daran: ref ist auch von Natur aus reaktiv, ref(obj) ist gleichbedeutend mit reactive({value: obj})

• Verwenden Sie den Wert von ref in vue, ohne ihn über .value zu erhalten
• Um den Wert von ref in js zu verwenden, müssen Sie ihn über .value abrufen.

2. flachRef und flachReaktiv

Rekursives und nicht-rekursives Monitoring
Sowohl ref als auch reactive gehören zur rekursiven Überwachung, d. h. jede Datenebene reagiert. Wenn die Datenmenge groß ist, wird viel Leistung verbraucht. Bei der nicht rekursiven Überwachung wird nur die erste Datenebene überwacht.

1. ref und shallowRef

• Jede durch ref definierte Datenebene ist responsive Daten
• Für durch ShallowRef definierte Daten reagiert nur die erste Ebene, d. h. Reaktionsfähigkeit kann nur erreicht werden, wenn .value geändert wird.

lass Alter = ref({
      a: '1',
      F: {
        b: '2',
        S:{
          c: '3'
        }
      }
    })
//Daten jeder Ebene drucken console.log(age);
Konsole.log(Alter.Wert);
Konsole.log(Alter.Wert.f);
Konsole.log(Alter.Wert.fs);

lass Alter = flacherRef({
      a: '1',
      F: {
        b: '2',
        S:{
          c: '3'
        }
      }
    })
//Daten jeder Ebene drucken console.log(age);
Konsole.log(Alter.Wert);
Konsole.log(Alter.Wert.f);
Konsole.log(Alter.Wert.fs);

Nach der Verwendung von ShallowRef können Sie die Schnittstelle aktiv über die Methode triggerRef () aktualisieren, um eine Schnittstellenaktualisierung zu erreichen

Funktion doSome(){
  Alter.Wert.fsc = "c";
  //Aktualisiere die Schnittstelle aktiv triggerRef(age);
}

2. reaktiv und flachReaktiv

Hinweis: shallowReactive hat keine Methode ähnlich zu triggerRef()

3. zu Roh

Welches Problem löst toRaw?

Manchmal möchten wir nicht, dass die Daten in Echtzeit und reaktionsfähig aktualisiert werden. Wir können toRaw verwenden, um die Originaldaten abzurufen, auf die von ref oder reactive verwiesen wird. Das Ändern der Originaldaten führt nicht dazu, dass die Schnittstelle aktualisiert wird. Reaktionsfähige Änderungen an der Schnittstelle treten nur auf, wenn die von ref und reactive umschlossenen Daten geändert werden.

lass obj1 = {...};
//state und obj1 werden referenziert. Das Wesen von state ist ein Proxy-Objekt, das auf obj1 verweist
lass Zustand = reaktiv(Objekt1);
//Wenn man die Originaldaten über die toRaw-Methode abruft, erhält man tatsächlich die Speicheradresse von obj1. obj2 und obj1 sind völlig gleich. let obj2 = toRaw(state)
console.log(obj1 === obj2); //wahr

Einige Studenten fragen sich vielleicht: Reicht es nicht aus, einfach obj1 zum Ändern der Daten zu verwenden? Der Schlüssel liegt jedoch darin, dass wir, wenn wir reaktiv zum Definieren von Daten verwenden, normalerweise nicht zuerst ein Objekt definieren und es dann an reaktiv übergeben. Wir schreiben die Daten direkt in reaktiv.

4. markRaw

Im Gegensatz zu toRaw werden die von markRaw gewrappten Daten niemals verfolgt!

Ich habe noch keine Verwendung dafür gefunden (manueller Hundekopf)

let obj1 = {Name: "lijing", Alter: 18}
sei obj2 = markRaw(obj1);
// Obwohl die von Reactive umschlossenen Daten zu diesem Zeitpunkt ein responsives Objekt sind, werden sie nicht verfolgt und erzeugen keine Auswirkungen. let state1 = reactive(obj2)

console.log(obj1 === obj2); //wahr

5. toRef und toRefs

Sowohl ref als auch toRef werden zum Erstellen von responsiven Daten verwendet. Was ist der Unterschied zwischen den beiden? Sehen wir uns zwei Beispiele an.

1. Referenz

Das Kopieren und Ändern von responsiven Daten hat keine Auswirkungen auf vorherige Daten und die Schnittstelle wird automatisch aktualisiert, wenn sich die Daten ändern

Der konvertierte Typ ist ein RefImpl

Es ist ersichtlich, dass nach der Verwendung von ref zur responsiven Transformation eines einfachen Datentypattributs eines Objekts das Ändern der responsiven Daten die Originaldaten nicht beeinflusst. Wie in der obigen Abbildung gezeigt, ändert sich der Wert des a-Attributs in obj1 nicht, nachdem der Wert durch state1 geändert wurde. Hier ist ein Punkt zu beachten: Das geänderte Attribut muss ein einfacher Datentyp und ein bestimmter Wert sein und darf keine Referenz sein. Wenn das Attribut auch ein Objekt ist, wird es betroffen sein, weil Objekt-->Referenz!

Wenn im obigen Beispiel beispielsweise obj1.f an state1 übergeben wird, ist die Situation völlig anders.

//Entspricht let state1 = ref({b: '2',s: {c: '3'}})
// Auch gleichwertig mit --->let state1 = reactive({value: {....}}})
Lassen Sie state1 = ref(obj1.f);

2. toRef

Wenn toRef zur Konvertierung verwendet wird, wirkt sich eine Änderung der Antwortdaten auf die Originaldaten aus. Die Daten ändern sich, aber die Schnittstelle wird nicht automatisch aktualisiert.

Der konvertierte Typ ist ein ObjectRefImpl

ref ähnelt einer tiefen Kopie, toref ähnelt einer flachen Kopie

3. zu Referenzen

Iteriert über alle Eigenschaften in einem Objekt und wandelt sie in responsive Daten um. Dies liegt daran, dass toRef nur einen Schlüssel übergeben kann. Der von toRefs erzielte Effekt ist derselbe wie bei toRef.

Tipps: Derzeit werden am häufigsten Ref und Reactive verwendet. Andere Dinge werden im Allgemeinen verwendet, um die Leistung später zu verbessern.

Zusammenfassen

Dies ist das Ende dieses Artikels über Ref und Reactive in Vue3. Weitere relevante Vue3-Ref- und Reactive-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!