Technologieaustausch

Reaktive ref() und reaktive()

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina


ref()

  • Wirkung: Reaktionsvariablen definieren.

  • Grammatik:let xxx=ref(Anfangswert).

  • Rückgabewert: Ein Instanzobjekt von RefImpl, das als Ref-Objekt oder Ref bezeichnet wird. Das Wertattribut des Ref-Objekts reagiert.

  • Seien Sie vorsichtig

    1. Betriebsdaten in JS erfordern: xxx.value, aber .value ist in der Vorlage nicht erforderlich, verwenden Sie es einfach direkt.
    2. Für let name =ref('Zhang San') reagiert der Name nicht, aber name.value reagiert.

reaktiv()

  • Wirkung: Definieren Sie reaktionsfähige Objekte (verwenden Sie es nicht für Basistypen, sondern verwenden Sie ref, andernfalls wird ein Fehler gemeldet).

  • Grammatik:responsives Objekt = reaktiv (Quellobjekt).

  • Rückgabewert: Ein Instanzobjekt von Proxy, das als reaktionsfähiges Objekt bezeichnet wird.

  • Seien Sie vorsichtig: Die durch reaktiv definierten Reaktionsdaten sind „tief“.

ref vs. reaktiv

  • Aus makroökonomischer Sicht:
    1. ref wird verwendet, um Folgendes zu definieren: Basistypdaten, Objekttypdaten;
    2. reaktiv wird verwendet, um Folgendes zu definieren: Objekttypdaten.
  • der Unterschied:
    1. Von ref erstellte Variablen müssen einen Wert verwenden (Sie können das Volar-Plug-in verwenden, um automatisch einen Wert hinzuzufügen).
    2. Reaktiv weist ein neues Objekt neu zu und verliert an Reaktionsfähigkeit (Sie können 0object.assign verwenden, um es als Ganzes zu ersetzen).
  • Nutzungsgrundsätze:
    1. Wenn Sie einen grundlegenden Typ reaktionsfähiger Daten benötigen, müssen Sie ref verwenden.
    2. Wenn Sie ein reaktionsfähiges Objekt benötigen, ist die Hierarchie nicht tief. Sie können entweder ref oder reactive verwenden.
    3. Wenn Sie ein reaktionsfähiges Objekt mit einer tiefen Hierarchie benötigen, wird die Verwendung von reaktiv empfohlen.

toRefs und toRef

Wirkung: Konvertieren Sie jedes Attribut in einem responsiven Objekt in ein Ref-Objekt.
Anmerkung: toRefs hat die gleiche Funktion wie toRef, toRefs kann jedoch stapelweise konvertiert werden.
Die Syntax lautet wie folgt:

import {reactive,toRefs,toRef} from
// 数据
let person = reactive({
	name:'张三
	age:18
})
let {name,age} = toRefs(person)
let nl = toRef(person,'age')