Zusammenfassung Vue erstellt reaktionsfähige Datenobjekte (reaktiv, ref, toRef, toRefs)

1. reaktiv

Die reaktive-Methode erstellt ein tief reagierendes Objekt (Proxy-Proxy-Objekt) basierend auf dem eingehenden Objekt. reactive方法根据传入的对象，创建返回一个深度响应式对象（Proxy代理对象）。

reactive 会对传入对象进行包裹，创建一个该对象的
Proxy代理对象。它是源对象的响应式副本，不等于原始对象。它==“深层”==转换了源对象的所有嵌套property（属性）
，解包并维持其中的任何ref引用关系。

响应式对象属性值改动，不管层级有多深，都会触发响应式。新增和删除属性也会触发响应式。

二、ref

ref 函数用来将一项数据包装成一个响应式 ref 对象。它接收任意数据类型的参数，作为这个 ref 对象 内部的 value property 的值。

• 生成值类型数据（String，Number，Boolean，Symbol）的响应式对象

• 可以用ref对象.value访问或更改这个值。

• 生成对象和数组类型的响应式对象 （对象和数组一般不选用ref方式，而选用reactive方式，比较便捷）

三、reactive对比ref

• 从定义数据角度对比：

  • ref用来定义：任意数据类型

  • reactive用来定义：对象（或数组）类型数据

如何选择 ref 和 reactive？建议：

• 基础类型值(String，Number，Boolean，Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref

• 引用类型值(Object、Array)使用 reactive

• 从原理角度对比：

  • ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）。

  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

• 从使用角度对比：

  • ref定义的数据：访问或更改数据需要.value
  • reactive定义的数据：操作数据与读取数据均不需要.value。

四、toRef

• 针对一个响应式对象（reactive封装）的prop（属性）创建一个ref，且保持响应式

• 两者保持引用关系

语法：const 属性名= toRef(对象,'属性名')

五、toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法

• 将响应式对象（reactive封装）转成普通对象

• 对象的每个属性(Prop)都是对应的ref

• 两者保持引用关系

语法：const 属性名= toRefs(对象,'属性名')

注意：reactive封装的响应式对象，不要直接通过解构的方式return，这是不具有响应式的。

可以通过 toRefs 处理，然后再解构返回，这样才具有响应式

const state = reactive({ 
		age: 20,
      	name: 'zhangsan'});
return {...state}; // 错误的方式，会丢失响应式
return toRefs(state); // 正确的方式
//最佳方式
return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

六、一些问题

为什么有了reactive函数还需要ref函数呢？

当我们只想让某个变量实现响应式的时候，采用reactive就会比较麻烦，因此vue3提供了ref方法进行简单值的监听，但并不是说ref只能传入简单值，他的底层是reactive，所以reactive有的，它都有。

记住：ref本质也是reactive，ref(obj)等价于reactive({value: obj})

reactive umhüllt das eingehende Objekt und erstellt ein
Proxy-Proxy-Objekt für das Objekt. Es handelt sich um eine responsive Kopie des Quellobjekts und ist nicht gleich dem Originalobjekt. Es == "deeply" == konvertiert alle verschachtelten Eigenschaften des Quellobjekts, entpackt und behält alle darin enthaltenen Referenzen bei.

Änderungen in den Eigenschaftswerten reaktionsfähiger Objekte lösen Reaktionsfähigkeit aus, unabhängig davon, wie tief die Ebene ist. Auch das Hinzufügen und Löschen von Attributen löst Reaktivität aus. ref wird verwendet, um ein Datenelement in ein responsives Ref-Objekt einzuschließen. Es akzeptiert Parameter jedes Datentyps als Wert der value-Eigenschaft innerhalb dieses Ref-Objekts.

• Werttypdaten generieren (String, Number, Boolean, Symbol) Reaktiv Objekte
• Sie können auf diesen Wert zugreifen oder ihn ändern, indem Sie ref object.value verwenden. 🎜
• 🎜Reaktive Objekte vom Objekt- und Array-Typ generieren(Objekte und Arrays verwenden im Allgemeinen nicht den Ref-Modus, sondern den reaktiven Modus, was praktischer ist)🎜
🎜3. Reaktiver Vergleich ref🎜
• 🎜Vergleich aus der Perspektive der Datendefinition:🎜
  • 🎜ref wird verwendet, um Folgendes zu definieren: jeden Datentyp🎜
  • 🎜reaktiv wird verwendet, um Folgendes zu definieren: Objekt- (oder Array-)Typdaten🎜

🎜Wie wählt man Ref und Reaktiv aus? Vorschläge: 🎜

• 🎜Grundlegende Typwerte (String, Zahl, Boolean, Symbol) oder Einzelwertobjekte (ähnlich wie { count : 1 } Objekte mit nur einem Attributwert) verwenden ref🎜
• 🎜Referenztypwerte (Objekt, Array) verwenden reaktiv🎜

🎜Aus dem Prinzip des Winkelvergleichs: 🎜
• 🎜ref implementiert Reaktionsfähigkeit (Datenentführung) durch Object.defineProperty()s get und set ). 🎜
• 🎜reactive implementiert Reaktionsfähigkeit (Datenhijacking) mithilfe von Proxy und betreibt Quellobjekt intern über Reflect Data 🎜
• 🎜Vergleich aus Nutzungssicht: 🎜
  • Daten definiert durch ref: Der Zugriff auf oder die Änderung von Daten erfordert .value li>
  • Daten definiert durch reactive: .value sind für Betriebsdaten und Lesedaten nicht erforderlich.
🎜4. toRef🎜
• 🎜Erstellen Sie eine Referenz für die Requisite (Eigenschaft) eines reaktionsfähigen Objekts (reaktive Kapselung) und halten Sie es reaktionsfähig 🎜
• 🎜Die beiden pflegen eine Referenzbeziehung🎜
🎜Syntax: const attribute name = toRef(object,'property name')🎜🎜5. toRefs🎜🎜toRefs ist eine praktische Methode zum Zerstören reaktiver Objekte und zum Konvertieren ihrer allen Eigenschaften in Refs🎜
• 🎜Konvertieren reaktiver Objekte (reaktive Kapselung) in gewöhnliche Objekte🎜
🎜Jede Eigenschaft (Prop) des Objekts ist eine entsprechende Referenz🎜
• 🎜Die beiden pflegen eine Referenzbeziehung🎜
🎜Syntax: const attribute name = toRefs (Objekt,'Eigenschaftsname')🎜🎜Hinweis: Reaktiv gekapselte reaktionsfähige Objekte sollten nicht direkt durch Destrukturierung zurückgegeben werden. Dies ist nicht reaktionsfähig. 🎜🎜 kann über toRefs verarbeitet und dann dekonstruiert und zurückgegeben werden, sodass es reagiert🎜rrreee🎜 6. Einige Fragen🎜

🎜Warum brauchen wir die Ref-Funktion, wenn wir eine reaktive Funktion haben? 🎜

🎜Wenn wir nur möchten, dass eine bestimmte Variable reagiert, ist die Verwendung von Reaktiv problematischer. Daher stellt vue3 die Ref-Methode zum Überwachen einfacher Werte bereit. Dies bedeutet jedoch nicht, dass Ref nur einfache Werte übergeben kann . , seine unterste Schicht ist reaktiv, also hat es alles, was reaktiv ist. 🎜🎜Denken Sie daran: ref ist auch reaktiver Natur, ref(obj) entspricht reaktiv({value: obj})🎜🎜🎜🎜🎜🎜🎜🎜【Verwandte Empfehlung: 🎜vue.js Video Tutorial 🎜】🎜

Das obige ist der detaillierte Inhalt vonZusammenfassung Vue erstellt reaktionsfähige Datenobjekte (reaktiv, ref, toRef, toRefs). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!