Einführung in die Vue3 Composition API

Vue3.0 hat die RC-Version im Juli veröffentlicht. Nach vue-cli4.5 unterstützt es auch die Auswahl von vue3 als alternative Version für Erfahrungszwecke. Die offizielle Version von vue3 ist wahrscheinlich nicht mehr weit. ich kann nicht mehr lernen!!!!
Im Vergleich zur Version vue2.0 (Option API) ist die Composition API eine der wichtigsten Änderungen in 3.0.

Überblick

Die Composition API ist hauptsächlich von React Hooks inspiriert. Ihr Zweck besteht darin, uns zu ermöglichen, die Logik von Komponenten durch eine Reihe wenig aufdringlicher, funktionaler APIs flexibler zu „kombinieren“.

Beispiel

<Vorlage>
 <div>{{Anzahl}}</div>
 <button @click="addCount">Hinzufügen</button>
</Vorlage>

<script lang="ts">
importiere { defineComponent, ref, onMounted } von „vue“;

exportiere StandarddefiniereKomponente({
 Name: "App",
 aufstellen () {
  Konstante Anzahl = ref(0)
  const getCount = () => {
   Anzahl.Wert = Math.floor(Math.random() * 10)
  }
  const addCount = () => {
   Anzahl.Wert++
  }
  beimMounted(() => {
   getCount()
  })

  zurückkehren {
   zählen,
   Anzahl hinzufügen
  }
 }
});
</Skript>

Wie der Name schon sagt, übergibt die Composition API keine Parameter wie „data“ und „mounted“ mehr. Stattdessen implementiert sie die bidirektionale Bindung von Daten und die Ausführung von Lebenszyklusfunktionen durch die Einführung von Methoden wie „ref“ und „onMounted“.

Warum wird es benötigt?

1. Wenn die Komponente komplex ist, kann der Logikcode kombiniert werden, ohne dass er durch Optionen zwangsweise getrennt werden muss. Dadurch wird die Obergrenze der Codequalität erhöht und gleichzeitig die Untergrenze der Codequalität gesenkt. Eine Vergleichstabelle von der offiziellen Website:

2. Bessere Wiederverwendung.

Wenn Sie in vue2 Logikcode wiederverwenden möchten, können Sie ihn über Mixin hinzufügen. Aber der Inhalt des Mixins ist eigentlich nicht intuitiv und der gleiche Name wird überschrieben. Da alle Methoden importiert werden, kann mit der Kompositions-API eine einzige Logik gekapselt werden. Kapseln Sie beispielsweise die Countdown-Funktion zum Versenden von Prüfcodes.

<Vorlage>
 <input type="number" placeholder="Bitte geben Sie den Bestätigungscode ein">
 <button v-if="count">Kann nach {{count}} Sekunden erneut gesendet werden</button>
 <button v-else @click="startCount">Bestätigungscode senden</button>
</Vorlage>

<script lang="ts">
importiere { defineComponent, ref, reaktiv } von „vue“;

const userCountDown = () => {
 Konstante Anzahl = ref(0)
 const countDown = (num: Zahl) => {
  Anzahl.Wert = Nummer
  Nummer--
  wenn (Zahl > 0) {
   setzeTimeout(() => {
    countDown(Zahl)
   }, 1000)
  }
 }
 const startCount = () => {
  // VerifyCode abrufen
  Countdown(60)
 }

 return { Anzahl, Startanzahl }
}

exportiere StandarddefiniereKomponente({
 Name: "Home",
 aufstellen () {
  const { Anzahl, Startanzahl } = BenutzerCountDown()
  return { Anzahl, Startanzahl }
 }
});
</Skript>

3. Bessere TypeScript-Unterstützung. Wir werden dem Vue-Prototyp nicht viel Inhalt hinzufügen, aber durch die Einführung wird die Typdefinition klarer.

aufstellen

„Setup“ ist eine neue von Vue hinzugefügte Option, die den Einstiegspunkt für die Verwendung der Composition API in Komponenten darstellt. Das Setup wird ausgeführt, nachdem die Vue-Komponenteninstanz erstellt und die Initialisierung der Props abgeschlossen wurde. Da das Setup aufgerufen wird, bevor die Option-API analysiert wird, unterscheidet sich dieses im Setup völlig von dem in den Optionen. Um Verwirrung zu vermeiden, verwenden Sie dies nicht im Setup. Gleichzeitig kann der vom Setup zurückgegebene Wert in Vorlagen und anderen Optionen verwendet werden. Aus Designperspektive erledigt Vue offiziell alles im Setup. Der Rückgabewert des Setups verbindet die Vorlage und die Methode.

ref、reaktiv

Da keine Daten mehr übergeben werden, sind für das Erstellen und Abhören von Daten in einer reaktionsfähigen Weise die von Vue bereitgestellten Ref- oder Reactive-Funktionen erforderlich. Es gibt einen Unterschied zwischen den beiden. „ref“ wird für Daten des Basiszuweisungstyps verwendet, während „reactive“ für Daten des Referenztyps verwendet wird.

Der Wert des grundlegenden Zuweisungstyps muss mithilfe der Methode .value in der Setup-Methode abgerufen und geändert werden. Denn wenn der Wert des Zuweisungstyps zurückgegeben wird, geht die doppelte Bindung der Daten verloren. Aber im Template ist direkter Zugriff möglich.

<Vorlage>
 <div>{{Anzahl}}
  <button @click="changeCount">Hinzufügen</button>
 </div>
 <div>Der Name des Studenten ist: {{student.name}}</div>
 <div>Das Alter des Studenten ist: {{student.age}}
  <button @click="changeStudentAge(20)">Hinzufügen</button>
 </div>
</Vorlage>

<script lang="ts">
importiere { defineComponent, ref, reaktiv } von „vue“;

exportiere StandarddefiniereKomponente({
 Name: "Home",
 aufstellen () {
  Konstante Anzahl = ref(0)
  const changeCount = () => {
   Anzahl.Wert = Anzahl.Wert + 1
  }
  const student = reaktiv({
   Name: 'Bob',
   Alter: 12
  })
  const changeStudentAge = (Alter: Zahl) => {
   student.age = Alter
  }
  zurückkehren {
   zählen,
   Änderungsanzahl,
   Student,
   ändereStudentAge
  }
 }
});
</Skript>

berechnet und beobachtet

<Vorlage>
 <div>{{Anzahl}}</div>
 <div>{{doubleCount}}</div>
 <button @click="addCount">Hinzufügen</button>
</Vorlage>

<script lang="ts">
importiere { defineComponent, ref, berechnet, watchEffect, watch } von „vue“;

exportiere StandarddefiniereKomponente({
 Name: "App",
 aufstellen () {
  Konstante Anzahl = ref(0)
  watch(Anzahl, () => { // Wenn mehrere, dann übergebe [Anzahl, Anzahl1] als Array
   console.log('watch', Anzahl.Wert)
  })
  UhrEffekt(() => {
   Konsole.log('watchEffect', Anzahl.Wert)
  })
  const addCount = () => {
   Anzahl.Wert++
  }
  const doubleCount = berechnet(() => {
   gibt Zählwert * 2 zurück
  })
  zurückkehren {
   zählen,
   Doppelte Anzahl,
   Anzahl hinzufügen
  }
 }
});
</Skript>

Der Unterschied zwischen watch und watchEffect besteht darin, dass watchEffect sofort ausgeführt wird und die während der Ausführung gelesenen Antwortdaten beobachtet werden. Und die Überwachung wird nur ausgeführt, wenn sich das Überwachungsobjekt ändert.

Lebenszyklus

• beforeCreate -> Verwenden von setup()
• erstellt -> setup() verwenden
• vorMount -> beiVorMount
• montiert -> onMounted
• vorUpdate -> beiVorUpdate
• aktualisiert -> beiAktualisiert
• vor Zerstörung -> bei Vor Unmount
• zerstört -> beiUnmount
• Fehler erfasst -> bei Fehler erfasst

Oben finden Sie den detaillierten Inhalt der Einführung in die Verwendung der Vue3 Composition API. Weitere Informationen zur Verwendung der Vue3 Composition API finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!