Ein Artikel über ref, toRef, toRefs in vue3

Dieser Artikel gibt Ihnen einen ausführlichen Vortrag über die Verwendung von ref, toRef und toRefs im vue3-Projekt. Ich hoffe, er wird für alle hilfreich sein!

1. Die ref

ref-Funktion kann einfache Datentypen in reaktionsfähige Daten umschließen (beachten Sie, dass Sie bei der Verarbeitung von Werten in JS die . value-Attribut in der Vorlage Verwenden Sie es einfach normal.
Zum Beispiel:

• ref packt grundlegende Typdaten
  App.vue

<template>
  <div>
      <div>{{ name }}</div>
      <button>修改数据</button>
  </div></template><script>
  import { ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

Sie können sehen, dass die Schreibmethode dieselbe ist wie reactive(), Sie müssen jedoch beim Schreiben in js einen zusätzlichen .value hinzufügen . [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

• ref verpackt komplexe Klassentypdaten
  Hinweis: ref kann tatsächlich komplexe Datentypen in reaktionsfähige Daten einschließen, im Allgemeinen, wenn der Datentyp nicht bestimmt ist Es wird empfohlen, ref zu verwenden, z. B. die vom Backend zurückgegebenen Daten.

<template>
    <div>
        <div>{{ data?.name }}</div>
        <button>修改数据</button>
    </div></template><script>
    import { ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            return { data, updateName }
        },
    }</script>

• Wie wählt man aus?
  ref() und reactive() sind zwei reaktive APIs, die in Vue.js3.0 bereitgestellt werden.
  ref() wird hauptsächlich zum Erstellen responsiver Daten verwendet. Es konvertiert ein gewöhnliches JavaScript-Objekt in ein responsives Objekt, sodass Änderungen in den Daten von der Vue-Instanz verfolgt werden können. Wenn sich die Daten ändern, aktualisiert Vue automatisch die zugehörigen Ansichten . Auf von ref() erstellte Responsivdaten kann über das Attribut .value zugegriffen und diese geändert werden.
  reactive() wird hauptsächlich zum Erstellen eines reaktiven Objekts verwendet, das als Zustandsobjekt mit mehreren Werten verwendet werden kann und normalerweise zum Verwalten komplexer Zustände verwendet wird. Es kann ein gewöhnliches JavaScript-Objekt in ein reaktionsfähiges Objekt umwandeln und unterstützt verschachtelte Eigenschaften. Auch wenn sich die verschachtelten Eigenschaften ändern, werden sie von der Vue-Instanz verfolgt. Wenn sich eine Eigenschaft im reaktionsfähigen Objekt ändert, aktualisiert Vue automatisch die zugehörige Ansicht.
  Wenn Sie genau wissen, dass es sich um ein Objekt handelt, das umhüllt werden muss, wird empfohlen, reaktiv zu verwenden. In anderen Fällen verwenden Sie ref.
  Nach Vue3.2 wird die Verwendung von ref eher empfohlen, und die Leistung wurde erheblich verbessert.

2. Die Rolle der toRef

toRef-Funktion: Konvertieren Sie ein bestimmtes Attribut im reaktionsfähigen Objekt in separate reaktionsfähige Daten, und der konvertierte Wert bezieht sich auf den vorherigen (die Ref-Funktion kann ebenfalls konvertiert werden). , aber der Wert ist unabhängig).
Schauen wir uns zunächst das folgende Beispiel an:

<template>
  <div>
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

Auch das Schreiben auf diese Weise kann die Daten in responsive Daten umwandeln, bringt aber zwei Probleme mit sich:

• Problem 1: Obj muss in der Vorlage verwendet werden, um sie zu erhalten . Daten, Ärger.

• Problem 2: Obwohl in der Vorlage nur Name und Alter verwendet werden, wird das gesamte Objekt exportiert, was unnötig ist und eine Leistungsverschwendung darstellt.

<template>
  <div>
      <h2>name: {{ name }} </h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const name = toRef(obj, &#39;name&#39;)
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

Auf diese Weise können wir die Daten, die wir benötigen, zurückgeben, was Leistung und Schreibaufwand in der Vorlage spart und eher einem „Import auf Abruf“ ähnelt

3 torefs

toRefs-Funktion Funktion: Konvertieren Sie alle Eigenschaften im reaktionsfähigen Objekt in separate reaktionsfähige Daten, und die konvertierten Werte beziehen sich auf die vorherigen.

<template>
  <div>
      <h2>{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs gibt alle unsere reaktionsfähigen Daten zurück. Verwenden Sie dann einfach den Datennamen direkt. Lassen Sie uns ohne weitere Umschweife lernen, wie man diese drei Methoden anwendet und welche Unterschiede zu reaktiven Methoden bestehen.

(Teilen von Lernvideos:

Vuejs-Einführungs-Tutorial

Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonEin Artikel über ref, toRef, toRefs in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!