Einführung in die allgemeine API-Verwendung von Vue3

Vue3.x ist schon so lange veröffentlicht, und die damit verbundene Ökologie ist allmählich entstanden, einschließlich des neuen Verpackungstools vite. Beim Erlernen von vue3.0 gibt es einige praktische API-Vergleiche. Ich hoffe, Ihnen eine Demonstration in der Entwicklung geben zu können und die entsprechende API genau zu verwenden, um unsere Projektentwicklung abzuschließen.

Veränderungen im Lebenszyklus

Es ist zu beachten, dass die Setup-Funktion die beiden Lebenszyklusfunktionen „beforeCreate“ und „created“ ersetzt. Wir können also davon ausgehen, dass ihre Ausführungszeit zwischen „beforeCreate“ und „create“ liegt.

Freunde, die Vue3 kennengelernt haben, wissen, dass jetzt die Setup-Funktion verwendet wird. Es wäre besser, Beispiele zu verwenden, um den Datenbetrieb in der Setup-Funktion zu veranschaulichen.

reaktiv

Die reaktive Methode wird verwendet, um ein reaktionsfähiges Datenobjekt zu erstellen. Diese API löst auch das Problem der Datenreaktionsfähigkeit von Vue2 über defineProperty.

Die Verwendung ist sehr einfach, übergeben Sie die Daten einfach als Parameter

<Vorlage>
 <div id="app">
 <!-- 4. Zugriffsanzahl im responsiven Datenobjekt -->
 {{ Zustand.Anzahl }}
 </div>
</Vorlage>

<Skript>
// 1. Reaktiv aus Vue importieren 
importiere {reaktiv} von 'vue'
Standard exportieren {
 Name: "App",
 aufstellen() {
 // 2. Erstellen Sie ein responsives Datenobjekt const state = reactive({count: 3})

 // 3. Gibt den Status des responsiven Datenobjekts für die Verwendung der Vorlage zurück return {state}
 }
}
</Skript>

Referenz

Bei der Einführung der Setup-Funktion haben wir die Ref-Funktion verwendet, um ein responsives Datenobjekt zu umschließen. Oberflächlich betrachtet scheint sie dieselbe Funktion wie Reactive zu haben. Sie ist tatsächlich ähnlich, da Ref ein Objekt durch Reactive umschließt und dann den Wert an das Value-Attribut im Objekt übergibt. Dies erklärt auch, warum wir bei jedem Zugriff .value hinzufügen müssen.

Wir können ref(obj) einfach als reactive({value: obj}) verstehen.

<Skript>
importiere {ref, reaktiv} von 'vue'
Standard exportieren {
 Name: "App",
 aufstellen() {
 const obj = {Anzahl: 3}
 Konstant state1 = ref(obj)
 const state2 = reaktiv(Objekt).

 console.log(Status1)
 console.log(status2)
 }
 
}
</Skript> 

Hinweis: Der .value wird hier nur benötigt, wenn in der Setup-Funktion auf das von ref umschlossene Objekt zugegriffen wird. Beim Zugriff in der Vorlagenvorlage wird er nicht benötigt, da beim Kompilieren automatisch erkannt wird, ob es von ref umschlossen ist.

Wie wählen wir also Ref und Reactive aus?
Anregung:

1. Verwenden Sie ref für primitive Werte (String, Number, Boolean usw.) oder Einzelwertobjekte (wie {count: 3}, das nur einen Eigenschaftswert hat).
2. Referenztypwerte (Objekt, Array) verwenden reaktiv
   

Wir verwenden ref, um Element-Tags in vue2.x abzurufen. Was müssen wir tun, wenn wir Element-Tags in vue3.x abrufen möchten?

<Vorlage>
 <div>
 <div ref="el">div-Element</div>
 </div>
</Vorlage>

<Skript>
importiere { ref, onMounted } von 'vue'
Standard exportieren {
 aufstellen() {
 //Erstellen Sie eine DOM-Referenz. Der Name muss mit dem Ref-Attributnamen des Elements übereinstimmen const el = ref(null)

 // Das Zielelement kann über el erst nach dem Mounten abgerufen werden onMounted(() => {
  el.value.innerHTML = 'Der Inhalt wurde geändert'
 })

 //Gib die erstellte Referenz zurück return {el}
 }
}
</Skript>

Der Vorgang zum Abrufen von Elementen gliedert sich in die folgenden Schritte:

1. Legen Sie zunächst einen Wert für das ref-Attribut des Zielelements fest, vorausgesetzt, es ist el
2. Rufen Sie dann die Ref-Funktion in der Setup-Funktion mit dem Wert null auf und weisen Sie sie der Variable el zu. Beachten Sie, dass der Variablenname mit dem Ref-Attributnamen übereinstimmen muss, den wir für das Element festgelegt haben.
3. Gibt die Referenzvariable el an das Element zurück

Ergänzung: Auf die festgelegte Elementreferenzvariable kann erst zugegriffen werden, nachdem die Komponente montiert wurde. Daher sind Operationen am Element vor der Montage ungültig. Wenn wir auf ein Komponentenelement verweisen, erhalten wir natürlich das Instanzobjekt der Komponente.

zuReferenz

toRef konvertiert einen Wert in einem Objekt in responsive Daten. Es erhält zwei Parameter. Der erste Parameter ist das obj-Objekt; der zweite Parameter ist der Eigenschaftsname im Objekt.

<Skript>
// 1. In Referenz importieren
importiere { toRef } von 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {Anzahl: 3}
  // 2. Konvertieren Sie den Wert des Attributs count im obj-Objekt in responsive Daten const state = toRef(obj, 'count')
 
  // 3. Gib das von toRef umschlossene Datenobjekt zurück, damit die Vorlage return {state} verwenden kann.
 }
}
</Skript>

Oben gibt es einen Ref und einen ToRef. Ist das nicht ein Konflikt? Die beiden haben unterschiedliche Auswirkungen:

<Vorlage>
 <p>{{ Staat1 }}</p>
 <button @click="add1">Hinzufügen</button>

 <p>{{ Staat2 }}</p>
 <button @click="add2">Hinzufügen</button>
</Vorlage>

<Skript>
importiere {ref, toRef} von 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {Anzahl: 3}
  const state1 = ref(Objektanzahl)
  const state2 = toRef(obj, 'Anzahl')

  Funktion add1() {
   Zustand1.Wert++
   console.log('Ursprünglicher Wert:', obj);
   console.log('Responsives Datenobjekt:', state1);
  }

  Funktion add2() {
   state2.value++
   console.log('Ursprünglicher Wert:', obj);
   console.log('Responsives Datenobjekt:', state2);
  }

  Rückgabewert {Zustand1, Zustand2, Add1, Add2}
 }
}
</Skript>

ref ist eine Kopie der Originaldaten und hat keinen Einfluss auf den Originalwert. Gleichzeitig wird die Ansicht synchron aktualisiert, wenn sich der Wert des reagierenden Datenobjekts ändert.
toRef ist ein Verweis auf die Originaldaten, der sich auf den Originalwert auswirkt. Wird die Ansicht jedoch aktualisiert, nachdem sich der Wert des reagierenden Datenobjekts geändert hat?

zuReferenzen

Wandelt die Werte aller Attribute im übergebenen Objekt in ein responsives Datenobjekt um. Diese Funktion unterstützt einen Parameter, das obj-Objekt.

<Skript>
// 1. In Referenzen importieren
importiere { toRefs } von 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {
   Name: 'Frontend-Eindruck',
   Alter: 22,
   Geschlecht: 0
  }
  // 2. Konvertieren Sie den Wert des Attributs count im obj-Objekt in responsive Daten const state = toRefs(obj)
 
  // 3. Console.log(Status) drucken und prüfen
 }
}
</Skript>

Was zurückgegeben wird, ist ein Objekt, das jedes verpackte responsive Datenobjekt enthält

flachReaktiv

Wie der Name dieser API schon andeutet, handelt es sich um eine oberflächliche reaktive API. Bedeutet das, dass die ursprüngliche reaktive API tief ist? Ja, dies ist eine API zur Leistungsoptimierung.

<Skript>
<Vorlage>
 <p>{{ Staat.a }}</p>
 <p>{{ Staat.erster.b }}</p>
 <p>{{ Zustand.Erster.Zweiter.c }}</p>
 <button @click="change1">Änderung 1</button>
 <button @click="change2">Änderung 2</button>
</Vorlage>
<Skript>
importiere { flachReaktiv } von 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {
   ein: 1,
   Erste: {
   b: 2,
   zweite: {
    c: 3
   }
   }
  }
  
  Konstantstatus = flachReaktiv(Objekt).
 
  Funktion change1() {
   Zustand.a = 7
  }

  Funktion change2() {
   Zustand.erster.b = 8
   Zustand.erster.zweiter.c = 9
   konsole.log(Status);
  }

  returniere {Status}
 }
}
</Skript>

Zuerst haben wir auf die zweite Schaltfläche geklickt und b auf der zweiten Ebene und c auf der dritten Ebene geändert. Obwohl sich die Werte geändert haben, wurde die Ansicht nicht aktualisiert.

Wenn wir auf die erste Schaltfläche klicken und das a der ersten Ebene ändern, wird die gesamte Ansicht aktualisiert.

Dies zeigt, dass shallowReactive den Wert der ersten Attributebene überwacht und die Ansicht aktualisiert, sobald er sich ändert.

flachRef

Dies ist ein flacher Verweis, der wie flachReactive zur Leistungsoptimierung verwendet wird. Wenn er mit triggerRef aufgerufen wird, kann die Ansicht sofort aktualisiert werden. Er erhält einen Parameterstatus, der das Verweisobjekt ist, das aktualisiert werden muss.

shallowReactive überwacht die Datenänderungen der ersten Ebene des Objekts, um die Ansichtsaktualisierung zu steuern, während shallowRef die Änderungen von .value überwacht, um die Ansicht zu aktualisieren.

<Vorlage>
 <p>{{ Staat.a }}</p>
 <p>{{ Staat.erster.b }}</p>
 <p>{{ Zustand.Erster.Zweiter.c }}</p>
 <button @click="change">Ändern</button>
</Vorlage>

<Skript>
importiere {shallowRef, triggerRef} aus 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {
   ein: 1,
   Erste: {
   b: 2,
   zweite: {
    c: 3
   }
   }
  }
  
  Konstantstatus = flacherRef(Objekt).
  konsole.log(Status);

  Funktion ändern() {
   Zustand.Wert.erste.b = 8
   Zustand.Wert.erste.zweite.c = 9
   // Nach der Änderung des Wertes die Ansicht so steuern, dass triggerRef(state) sofort aktualisiert wird
   konsole.log(Status);
  }

  return {Zustand, Änderung}
 }
}
</Skript>

zuRaw

Die Methode toRaw wird verwendet, um die Rohdaten eines Ref- oder reaktiven Objekts abzurufen.

<Skript>
importiere {reaktiv, toRaw} von 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {
   Name: 'Frontend-Eindruck',
   Alter: 22
  }

  konstanter Zustand = reaktiv(Objekt) 
  const raw = toRaw(Zustand)

  console.log(obj === raw) // wahr
 }
}
</Skript>

Der obige Code beweist, dass die toRaw-Methode die Originaldaten vom reaktiven Objekt abruft, sodass wir problemlos einige Leistungsoptimierungen vornehmen können, indem wir den Wert der Originaldaten ändern, ohne die Ansicht zu aktualisieren.

Hinweis: Wenn der von der toRaw-Methode empfangene Parameter ein Ref-Objekt ist, müssen Sie außerdem .value hinzufügen, um das ursprüngliche Datenobjekt zu erhalten

markRaw

Die Methode markRaw kann die Originaldaten als nicht reagierend markieren. Selbst wenn sie mit ref oder reactive umschlossen ist, kann keine Datenreaktion erreicht werden. Sie erhält einen Parameter, die Originaldaten, und gibt die markierten Daten zurück. Auch wenn wir den Wert ändern, wird die Ansicht nicht aktualisiert, d. h. die Datenreaktion ist nicht implementiert

<Vorlage>
 <p>{{ staat.name }}</p>
 <p>{{ Bundesland.Alter }}</p>
 <button @click="change">Ändern</button>
</Vorlage>

<Skript>
importiere {reactive, markRaw} von 'vue'
Standard exportieren {
 aufstellen() {
  const obj = {
   Name: 'Frontend-Eindruck',
   Alter: 22
  }
  // Markiere das Originaldatenobjekt durch markRaw, damit dessen Datenaktualisierung nicht mehr verfolgt wird const raw = markRaw(obj) 
  // Versuchen Sie, Raw mit Reactive zu umschließen, um daraus responsive Daten zu machen. const state = reactive(raw) 

  Funktion ändern() {
   Staat.Alter = 90
   konsole.log(Status);
  }

  return {Zustand, Änderung}
 }
}
</Skript>

Uhreffekt

Die Hauptunterschiede zwischen watchEffect und watch sind folgende:

1. Keine Notwendigkeit, Abhängigkeiten manuell einzugeben
2. Bei jeder Initialisierung wird eine Callback-Funktion ausgeführt, um automatisch Abhängigkeiten abzurufen
3. Der ursprüngliche Wert kann nicht abgerufen werden, nur der geänderte Wert kann abgerufen werden

<Skript>
importiere {reactive, watchEffect} von 'vue'
Standard exportieren {
 aufstellen() { 
   const state = reaktiv({Anzahl: 0, Name: 'zs'})

   UhrEffekt(() => {
   Konsole.log(Status.Anzahl)
   console.log(Status.Name)
   /* Während der Initialisierung drucken:
     0
     z

   Nach 1 Sekunde wird gedruckt:
     1
     ls
   */
   })

   setzeTimeout(() => {
   Zustand.Anzahl++
   Staat.Name = "ls"
   }, 1000)
 }
}
</Skript>

Anstatt eine Abhängigkeit an die Überwachungsmethode zu übergeben, wird direkt eine Rückruffunktion angegeben.

Wenn die Komponente initialisiert wird, wird die Rückruffunktion einmal ausgeführt und die zu erkennenden Daten werden automatisch abgerufen: state.count und state.name

Basierend auf den oben genannten Merkmalen können wir auswählen, welchen Listener wir verwenden möchten

Aktuelle Instanz abrufen

Wir alle wissen, dass wir in jeder Komponente von Vue2 die Instanz der aktuellen Komponente abrufen können, wenn wir dies möchten. In Vue3 wird ein Großteil unseres Codes in der Setup-Funktion ausgeführt, und in dieser Funktion verweist dies auf undefined. Wie erhalten wir also die Instanz der aktuellen Komponente? Zu diesem Zeitpunkt kann eine andere Methode verwendet werden, nämlich getCurrentInstance

<Vorlage>
 <p>{{ Zahl }}</p>
</Vorlage>
<Skript>
importiere {ref, getCurrentInstance} von 'vue'
Standard exportieren {
 aufstellen() { 
  Konstante Zahl = Ref(3)
  const Instanz = getCurrentInstance()
  console.log(Instanz)

  Rückgabewert {num}
 }
}
</Skript>

Konzentrieren Sie sich beispielsweise auf die CTX- und Proxy-Eigenschaften, die wir möchten. Es ist ersichtlich, dass der Inhalt von CTX und Proxy sehr ähnlich ist, außer dass letzterer mit einer Proxy-Schicht außerhalb des ersteren umhüllt ist, was zeigt, dass der Proxy reagiert

verwendenSpeichern

Wenn wir Vuex in Vue2 verwenden, erhalten wir alle die Vuex-Instanz über this.$store, aber im vorherigen Teil wurde gesagt, dass die Art und Weise, wie man dies in Vue2 erhält, anders ist, und wir haben das $store-Attribut in getCurrentInstance().ctx von Vue3 nicht gefunden, also wie erhalten wir die Vuex-Instanz? Dies erfordert eine Methode in vuex, nämlich useStore

// index.js im Store-Ordner
Vuex von „vuex“ importieren

const store = Vuex.createStore({
 Zustand: {
  Name: 'Frontend-Eindruck',
  Alter: 22
 },
 Mutationen:
  …
 },
 …
})

// beispiel.vue
<Skript>
// Importieren Sie die useStore-Methode von vuex import {useStore} von 'vuex'
Standard exportieren {
 aufstellen() { 
  // Holen Sie sich die Vuex-Instanz const store = useStore()

  console.log(speichern)
 }
}
</Skript>

Anschließend können Sie vuex wie gewohnt nutzen.

Oben finden Sie den detaillierten Inhalt der Einführung in die häufig verwendete API-Verwendung von vue3. Weitere Informationen zur häufig verwendeten API-Verwendung von vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!