Vue3 setup() - Erweiterte Verwendungsbeispiele - ausführliche Erklärung

Dieser Artikel enthält viele nützliche Informationen. Es wird daher empfohlen, ihn zu speichern.

Beim Upgrade von vue2 auf vue3 ist vue3 mit vue2 kompatibel, sodass vue3 die optionale API von vue2 übernehmen kann. Da eine Variable in der optionalen API an mehreren Stellen vorhanden ist, müssen bei Problemen mehrere Funktionen überprüft werden. Bei großen Projekten wird die Fehlerbehebung durch auftretende Probleme schwieriger. Daher wurde in vue3 ein neues Setup-Konfigurationselement hinzugefügt, das zum Schreiben kombinierter APIs verwendet wird.

1. Unterschiede zwischen Options-API und Kombinations-API

Einige Studenten verwenden Vue seit einem Jahr, ohne es zu wissen, aber sie kennen nicht einmal die optionale API! Bist du dieser Klassenkamerad? Wenn ja, holen Sie es schnell ab.

Die Options-API in vue2 ist eine optionale API, eine auf Chinesisch und eine auf Englisch. Sie können sie nennen, wie Sie möchten.

In einer Vue-Datei werden Daten, Methoden, bereitgestellte, berechnete, überwachte usw. verwendet, um Eigenschaften und Methoden zu definieren, mit denen die Seitenlogik gemeinsam gehandhabt wird. Wir nennen diese Methode Options API.

Beispiel 1: Zähler

<Vorlage>
 <div>
  <button @click="Hinzufügen">+</button>
   {{num}}
  <button @click="reduzieren">-</button>
 </div>
</Vorlage>
<Skript>
Standard exportieren {
 Daten(){
  zurückkehren {
   Zahl: 0
  }
 },
 Methoden:{
  hinzufügen(){
   diese.num++
  },
  reduzieren(){
   diese.Nummer--
  }
 }
}
</Skript>

Wenn wir das obige Beispiel betrachten, stellen wir fest, dass die Verarbeitung von Num-Werten zwei Optionen umfasst: Daten und Methoden. Die Geschäftsverarbeitung ist relativ verstreut. Wenn das Projekt klein ist, sieht es klar aus. Wenn das Projekt jedoch größer wird, enthalten Daten und Methoden viele Attribute und Methoden. Zu diesem Zeitpunkt ist es schwierig zu unterscheiden, welches Attribut welcher Methode entspricht. Daher fügt vue3 ein neues Setup zum Schreiben einer kombinierten API hinzu.

Die Composition API von Vue3 ist eine Kombinations-API.

Eine kombinierte API bedeutet, dass alle von einer Funktion definierten APIs zusammengeführt werden. Auf diese Weise können wir schnell alle mit der Funktion verbundenen APIs finden, selbst wenn das Projekt größer wird und die Funktionen zunehmen. Im Gegensatz zur Options-API sind die Funktionen verstreut und wenn Änderungen erforderlich sind, ist der Suchvorgang an mehreren Stellen schwierig.

Beispiel 2: Zähler

<Vorlage>
 <div>
  <button @click="Hinzufügen">+</button>
   {{num}}
  <button @click="reduzieren">-</button>
 </div>
</Vorlage>
<Skript>
 importiere { ref } von 'vue'
 Standard exportieren{
  aufstellen(){
   Konstante Nummer = Ref(1)
   zurückkehren {
    Nummer,
    hinzufügen(){
     Anzahl.Wert++
    },
    reduzieren(){
     Anzahl.Wert--
   }
  }
 }
}
</Skript>

Ref macht grundlegende Datentypen reaktionsfähig. Der nächste Artikel wird seine Verwendung im Detail vorstellen. Wenn Sie es brauchen, können Sie ihm folgen und sich nicht verirren!

Hier ist ein Bild, das Ihnen den Unterschied zwischen ihnen verdeutlicht:

2. Wie verwende ich das Setup?

2.1. Wann wird das Setup ausgeführt?

setup wird zum Schreiben kombinierter APIs verwendet. Aus Sicht der Lebenszyklus-Hook-Funktionen entspricht es dem Ersetzen von beforeCreate. Wird vor der Erstellung ausgeführt.

<Skript>
 Standard exportieren{
  erstellt(){
   console.log('erstellt');
  },
  aufstellen(){
   Konsole.log('Setup');
  }
 }
</Skript>

Nach der Ausführung steht das eingerichtete Druckergebnis immer im Vordergrund.

2.2. Wie verwende ich Setup-Daten und -Methoden?

Beispiel 3: Variablen direkt definieren und verwenden

<Vorlage>
 {{A}}
</Vorlage>
<Skript>
 Standard exportieren{
  aufstellen(){
   Konstante a = 0
  }
 }
</Skript>

Nach dem Ausführen sind die Ergebnisse abnormal:

runtime-core.esm-bundler.js?5c40:6584 [Vue-Warnung]: Während des Renderns wurde auf die Eigenschaft „a“ zugegriffen, sie ist jedoch in der Instanz nicht definiert.

Es weist uns darauf hin, dass das Attribut „a“, auf das wir zugegriffen haben, nicht auf der Instanz bereitgestellt ist.

Die Eigenschaften und Methoden im Setup müssen per return verfügbar gemacht werden, damit die Eigenschaften in der Instanz bereitgestellt werden können. Andernfalls können sie nicht verwendet werden. Der obige Code fügt return hinzu:

<Skript>
 Standard exportieren{
  aufstellen(){
   Konstante a = 0
   zurückkehren {
    A
   }
  }
 }
</Skript>

2.3. Gibt es dieses interne Setup?

Drucken Sie dies im Setup und das Ergebnis ist undefiniert. Dies bedeutet, dass dies im Setup nicht vorhanden ist und damit verbundene Dinge nicht gemountet werden können.

2.4. Wie verwende ich die Hook-Funktion im Setup?

Vue3 ist mit dem optionsbasierten Schreibstil von Vue2 kompatibel, sodass die Hook-Funktion parallel zum Setup existieren kann, was der Options-API entspricht.

Beispiel 4:

Standard exportieren{
 aufstellen(){
  Konsole.log('Setup');
 },
 montiert(){
  Konsole.log('gemountet');
 }
}

Die von vue3 hinzugefügte Funktion setup() wird zum Schreiben kombinierter APIs verwendet. Es wird daher nicht empfohlen, Code auf diese Weise zu schreiben. Daher müssen Sie die Funktionsfamilie onXXX verwenden, um die Hook-Funktion zu registrieren. Nach erfolgreicher Registrierung wird beim Aufruf eine Callback-Funktion übergeben.

Beispiel 5:

importiere { onMounted } von "vue";
Standard exportieren{
 aufstellen(){
  Konstante a = 0
  zurückkehren {
   A
  },
  beim Montieren(()=>{
   console.log("Ausführung");
 })
 }
}

Diese registrierten Lifecycle-Hook-Funktionen können während des Setups nur synchron verwendet werden, da sie zum Lokalisieren der aktuellen Komponenteninstanz auf den globalen internen Status angewiesen sind und ein Fehler ausgegeben wird, wenn die Funktion nicht unter der aktuellen Komponente aufgerufen wird.

Die anderen Hook-Funktionen sind gleich, führen Sie sie einfach nach Bedarf ein.

2.5. Zusammenhang zwischen Setup- und Hook-Funktionen

Wenn das Setup parallel zur Hook-Funktion aufgeführt wird, kann das Setup keine lebenszyklusbezogenen Funktionen aufrufen, der Lebenszyklus kann jedoch setupbezogene Eigenschaften und Methoden aufrufen.

Beispiel 6:

<Vorlage>
 <button @click="log">Klick mich</button>
</Vorlage>
<Skript>
Standard exportieren{
 aufstellen(){
  Konstante a = 0
  zurückkehren {
   A
  }
 },
 Methoden:{
  Protokoll(){
   console.log( this.$options.setup() ); // gibt ein Objekt zurück }
 }
}
</Skript>

this.$options.setup() gibt ein großes Objekt zurück, das alle Eigenschaften und Methoden im Setup enthält.

3. Parameter einrichten

Bei Verwendung des Setups werden zwei Parameter empfangen: „Requisiten“ und „Kontext“.

3.1. Requisiten

Der erste Parameter ist props, was bedeutet, dass die übergeordnete Komponente Werte an die untergeordnete Komponente übergibt. Props reagieren und werden automatisch aktualisiert, wenn neue Props übergeben werden.

Beispiel 7:

Standard exportieren{
 Requisiten: {
  msg: Zeichenfolge,
  Antwort: String,
 },
 Setup (Requisiten, Kontext) {
  console.log(props); //Proxy {msg: "Suche dringend einen Partner", ans: "Hast du einen Partner?"}
 },
}

Da Props reagieren, kann keine ES6-Destrukturierung verwendet werden, wodurch die Reaktionsfähigkeit der Props verloren geht. In diesem Fall ist eine toRefs-Destrukturierung erforderlich. Beispiel 8:

importiere { toRefs } von "vue";
 Standard exportieren{
  Requisiten: {
   msg: Zeichenfolge,
   Antwort: String,
  },
  Setup (Requisiten, Kontext) {
   console.log(Eigenschaften);
   const { msg, ans } = toRefs(Eigenschaften)
   console.log(msg.value); //Suche gespannt nach einem Partner console.log(ans.value); //Hast du einen Partner?
  },
 }

Beim Verwenden von Komponenten stoßen Sie häufig auf optionale Parameter. Manchmal müssen Sie einen Wert übergeben, manchmal aber nicht. Wie gehen Sie damit um?

Wenn „ans“ ein optionaler Parameter ist, ist „ans“ möglicherweise nicht in den übergebenen Props vorhanden. In diesem Fall erstellt toRefs keinen Ref für ans und Sie müssen stattdessen toRef verwenden.

importiere { toRef } von "vue";
Setup (Requisiten, Kontext) {
 let ans = toRef(props ,'ans') // Wenn es nicht existiert, erstelle ein ans
 Konsole.log(Antwort.Wert);
}

3.2, Kontext

Kontextkontextumgebung, die aus drei Teilen besteht: Attribute, Slots und benutzerdefinierte Ereignisse.

Setup (Requisiten, Kontext) {
 const { attrs, slots, emit } = Kontext
 // attrs holt den von der Komponente übergebenen Attributwert,
 // Slots in der Slots-Komponente // benutzerdefinierte Ereignis-Unterkomponente ausgeben}

attrs ist ein nicht reagierendes Objekt, das hauptsächlich No-Props-Attribute empfängt und oft verwendet wird, um einige Stilattribute zu übergeben.

Slots ist ein Proxy-Objekt, wobei slots.default() ein Array abruft, dessen Länge durch die Slots der Komponente bestimmt wird und den Slot-Inhalt enthält.

Dies ist im Setup nicht vorhanden, daher wird „emitt“ verwendet, um das vorherige „this.$emit“ zu ersetzen, und wird verwendet, um bei der Übergabe vom untergeordneten zum übergeordneten Element benutzerdefinierte Ereignisse auszulösen.

Beispiel 9:

<Vorlage>
 <div :style="attrs.style">
  <Steckplatz></Steckplatz>  
  <slot name="hh"></slot>
  <button @click="emit('getVal','Wert übergeben')">Kind übergibt Wert an Elternteil</button> 
 </div> 
</Vorlage>
<Skript>
importiere { toRefs,toRef } von "vue";
Standard exportieren{
 Setup (Requisiten, Kontext) {
  const { attrs, slots, emit } = Kontext
  // attrs holt das von der Komponente übergebene Style-Attribut console.log('slots', slots.default()); // Slot-Array console.log('slot attributes', slots.default()[1].props); // Ruft die Attribute des Slots ab return {
  Attribute,
  emittieren
   }
  },
 }
</Skript>

4. Zusammenfassung der Setup-Funktionen

1. Diese Funktion wird vor der Erstellung ausgeführt, wie oben erläutert.

2. Dies ist im Setup nicht vorhanden, daher können damit in Zusammenhang stehende Dinge nicht gemountet werden.

3. Die Eigenschaften und Methoden im Setup müssen zurückgegeben und verfügbar gemacht werden, sonst können sie nicht verwendet werden.

4. Die Daten im Setup reagieren nicht.

5. Das Setup kann keine lebenszyklusbezogenen Funktionen aufrufen, aber Lebenszyklusfunktionen können Funktionen im Setup aufrufen.

Dies ist das Ende dieses Artikels über die erweiterte Verwendung von vue3 setup(). Weitere relevante Inhalte zur Verwendung von vue3 setup() 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!