Code zwischen VUE -Komponenten teilen? Wenn Sie mit Vue 2 vertraut sind, haben Sie m?glicherweise Mixin verwendet, um dies zu erreichen. Die neue Kompositions -API (jetzt als Plugin für Vue 2 erh?ltlich und eine bevorstehende Funktion von Vue 3) bietet eine bessere L?sung.

In diesem Artikel werden die M?ngel von Mixin untersucht und verstehen, wie die Kompositions -API diese M?ngel überwindet und VUE -Anwendungen skalierbarer macht.

Kurze Beschreibung von Mixin

Lassen Sie uns den Mixin -Modus schnell überprüfen, da er im n?chsten Abschnitt entscheidend für das ist, was wir abdecken werden.

Typischerweise wird die VUE -Komponente durch ein JavaScript -Objekt definiert, das verschiedene Eigenschaften enth?lt, die die Funktionen darstellen, die wir implementieren müssen - wie Daten, Methoden, berechnete Eigenschaften usw.

 // mycomponent.js
Standard ausführen {
  Daten: () => ({{{
    mydataproperty: null
  }),
  Methoden: {
    myMethod () {...}
  }
  // ...
}

Wenn wir die gleichen Eigenschaften zwischen Komponenten teilen m?chten, k?nnen wir die gemeinsamen Eigenschaften in ein separates Modul extrahieren:

 // mymixin.js
Standard ausführen {
  Daten: () => ({{{
    myshareddataproperty: null
  }),
  Methoden: {
    mysharedMethod () {...}
  }
}

Jetzt k?nnen wir diesen Mixin jeder Komponente hinzufügen, die es verwendet, indem wir es der Mixin -Konfigurationseigenschaft zuweisen. Zur Laufzeit verschmilzt Vue die Eigenschaften der Komponente mit jedem zus?tzlichen Mixin.

 // ConsumingComponent.js
importieren mymixin aus "./mymixin.js";

Standard ausführen {
  Mixins: [Mymixin],
  Daten: () => ({{{
    MyLocaldataproperty: NULL
  }),
  Methoden: {
    MyLocalMethod () {...}
  }
}

Für dieses spezielle Beispiel lautet die von der Laufzeit verwendete Komponentendefinition wie folgt:

 Standard ausführen {
  Daten: () => ({{{
    myshareddataproperty: null,
    MyLocaldataproperty: NULL
  }),
  Methoden: {
    mysharedMethod () {...},
    MyLocalMethod () {...}
  }
}

Mixin gilt als "sch?dlich"

Bereits Mitte 2016 schrieb Dan Abramov ?Mixins als sch?dlich angesehen“, in dem er glaubte, dass die Verwendung von Mixins in React-Komponenten zur Wiederverwendung der Logik ein Anti-Muster ist und sich dafür einsetzte, sie zu vermeiden.

Leider gelten die M?ngel, die er über React Mixin erw?hnte, auch für VUE. Bevor wir verstehen, wie die Kompositions -API diese M?ngel überwindet, schauen wir uns diese M?ngel an.

Benennung von Konflikten

Wir sehen, wie der Mixin -Modus zur Laufzeit zwei Objekte verschmelzen. Was passiert, wenn sie alle eine Eigenschaft mit demselben Namen teilen?

 const mixin = {
  Daten: () => ({{{
    MyProp: Null
  })
}

Standard ausführen {
  Mixins: [Mixin],
  Daten: () => ({{{
    // den gleichen Namen!
    MyProp: Null
  })
}

Hier kommt die Fusionsstrategie ins Spiel. Dies ist eine Reihe von Regeln, um festzustellen, was passiert, wenn eine Komponente mehrere Optionen mit demselben Namen enth?lt.

Die Standard (aber konfigurierbare) Merge -Richtlinie von VUE -Komponenten sieht vor, dass lokale Optionen Mixinoptionen überschreiben. Aber es gibt Ausnahmen. Wenn wir beispielsweise mehrere Lebenszyklushaken desselben Typs haben, werden diese Haken zum Hakenarray hinzugefügt und alle Haken werden nacheinander aufgerufen.

Auch wenn wir keine tats?chlichen Fehler begegnen, kann es immer schwieriger sein, Code zu schreiben, wenn sie mit den benannten Eigenschaften zwischen mehreren Komponenten und Mischungen umgehen. Dies ist besonders schwierig, wenn ein Mixin von Drittanbietern als NPM-Paket und seine benannten Eigenschaften, die Konflikte verursachen k?nnen,.

Implizite Abh?ngigkeit

Es gibt keine hierarchische Beziehung zwischen Mixin und den Komponenten, die es verwenden. Dies bedeutet, dass die Komponente Dateneigenschaften verwenden kann, die im Mixin definiert sind (z. B. MySharedDataproperty), aber das Mixin kann es auch unter der Annahme von Dateneigenschaften verwenden, die in der Komponente definiert sind (z. B. MyLocaldataproperty). Dies ist üblich, wenn Mixin verwendet wird, um die Eingabevalidierung zu teilen. Das Mixin kann erwarten, dass die Komponente einen Eingangswert hat, der in seiner eigenen Validierungsmethode verwendet wird.

Dies kann jedoch Probleme verursachen. Was passiert, wenn wir die Komponente sp?ter neu aufstellen und den Namen der vom Mixin erforderlichen Variablen ?ndern m?chten? Wir werden keine Probleme aus den Komponenten bemerken. Der Codeinspektor wird es auch nicht finden. Wir werden nur zur Laufzeit Fehler sehen.

Stellen Sie sich nun eine Komponente vor, die viele Mixins enth?lt. K?nnen wir lokale Dateneigenschaften neu aufstellen oder werden wir den Mixin brechen? Welcher Mixin? Wir müssen manuell nach allen Mixins suchen, um zu wissen.

Migrieren Sie von Mixin

Der Artikel von Dan bietet Alternativen zum Mischen, einschlie?lich fortschrittlicher Komponenten, Versorgungsmethoden und einigen anderen Komponentenkombinationsmustern.

W?hrend VUE in vielerlei Hinsicht der Reaktion ?hnlich ist, wandelt sich das alternative Muster, das er vorschl?gt, nicht gut in Vue um. Obwohl dieser Beitrag Mitte 2016 geschrieben wurde, haben VUE-Entwickler seitdem Mixin-Probleme.

Bisher. Die Nachteile von Mixin sind einer der Hauptmotivationsfaktoren für die Zusammensetzung API. Bevor Sie verstehen, wie es das Mixinproblem überwindet, schauen wir uns einen kurzen Blick darauf an, wie es funktioniert.

Zusammensetzung API -Crashkurs

Die Schlüsselidee der Zusammensetzung API ist, dass sie als Objekteigenschaften als JavaScript -Variablen definiert werden, die aus der neuen Setup -Funktion zurückgegeben werden, anstatt die Funktionen von Komponenten (wie Zust?nden, Methoden, berechnete Eigenschaften usw.) als Objekteigenschaften zu definieren.

Hier ist ein klassisches Beispiel für eine Vue 2 -Komponente, die unter Verwendung der Kompositions -API definiert ist, die eine "Z?hler" -Funktion definiert:

 //Counter.vue
Standard ausführen {
  Daten: () => ({{{
    Graf: 0
  }),
  Methoden: {
    Increment () {
      this.count;
    }
  },
  berechnet: {
    doppelt () {
      kehre dies zurück. Count * 2;
    }
  }
}

Hier sind genau die gleichen Komponenten, die mit der Kompositions -API definiert sind.

 // counter.vue
import {ref, berechnet} aus "Vue";

Standard ausführen {
  aufstellen() {
    const count = ref (0);
    const double = berechnet (() => count.Value * 2)
    Funktion increment () {
      Graf.Value;
    }
    zurückkehren {
      z?hlen,
      doppelt,
      Inkrement
    }
  }
}

Sie werden zun?chst feststellen, dass wir die Ref -Funktion importiert haben, mit der wir eine reaktionsschnelle Variable definieren k?nnen, die fast die gleiche Funktion wie eine Datenvariable hat. Gleiches gilt für die computergestützte Funktion.

Die Inkrementmethode reagiert nicht an und kann daher als normale JavaScript -Funktion deklariert werden. Beachten Sie, dass wir den Sub -Property -Wert ?ndern müssen, um den Wert der z?hlenden Variablen zu ?ndern. Dies liegt daran, dass reaktionsschnelle Variablen, die mit Ref erstellt wurden, Objekte sein müssen, um ihre Reaktionsf?higkeit bei der übergabe aufrechtzuerhalten.

Es ist am besten, die Vue -Komposition -API -Dokumentation zu konsultieren, um ein detailliertes Verst?ndnis der Funktionsweise von Ref zu tun.

Nachdem wir diese Funktionen definiert haben, geben wir sie aus der Setup -Funktion zurück. Es gibt keinen Unterschied in den Funktionen der beiden oben genannten Komponenten. Wir haben nur die alternative API verwendet.

TIPP: Die Kompositions-API ist die Kernfunktion von Vue 3, aber Sie k?nnen auch das NPM-Plugin @vue/composition-api in Vue 2 verwenden.

Codeextraktion

Der erste offensichtliche Vorteil der Kompositions -API ist die einfache Extraktion der Logik.

Verwenden wir die Kompositions -API, um die oben definierten Komponenten neu zu refaktieren, damit die von uns definierte Funktionalit?t im JavaScript -Modul usecounter befindet. (Das Pr?fix "Verwendung" als Funktionsbeschreibung ist die Namenskonvention der Zusammensetzung API.)

 // usecounter.js
import {ref, berechnet} aus "Vue";

Standardfunktion exportieren () {
  const count = ref (0);
  const double = berechnet (() => count.Value * 2)
  Funktion increment () {
    Graf.Value;
  }
  zurückkehren {
    z?hlen,
    doppelt,
    Inkrement
  }
}

Code -Wiederverwendung

Um diese Funktion in einer Komponente zu verwenden, importieren wir das Modul einfach in die Komponentendatei und rufen sie auf (beachten Sie, dass der Import eine Funktion ist). Dadurch werden die von uns definierten Variablen zurückgegeben, die wir dann aus der Setup -Funktion zurückgeben k?nnen.

 // mycomponent.js
usecounter von "./uSecounter.js" importieren;

Standard ausführen {
  aufstellen() {
    const {count, double, Increment} = usecounter ();
    zurückkehren {
      z?hlen,
      doppelt,
      Inkrement
    }
  }
}

Zuerst scheint dies ein bisschen lang und bedeutungslos zu sein, aber lassen Sie uns sehen, wie dieses Muster das Mixinproblem überwindet, das wir zuvor gesehen haben.

Benennung von Konflikten ... gel?st!

Wir haben zuvor gesehen, dass Mixin Eigenschaften verwenden kann, die den gleichen Namen wie die in der Verwendungskomponente oder sogar konsequenter sind wie die in anderen Mixin, die von der Verwendung von Komponente verwendet werden.

Dieses Problem existiert nicht in der Kompositions -API, da wir einen aus der Kompositierungsfunktion zurückgegebenen Zustand oder eine Methode explizit benennen müssen:

 Standard ausführen {
  aufstellen () {
    const {somevar1, somemethod1} = useCompfunction1 ();
    const {somevar2, somemethod2} = useCompfunction2 ();
    zurückkehren {
      irgendwelchevar1,
      Somemethod1,
      irgendwelchevar2,
      Somemethod2
    }
  }
}

Die Namenskonflikte werden auf die gleiche Weise wie jede andere JavaScript -Variable gel?st.

Implizite Abh?ngigkeit ... gel?st!

Wir haben auch gesehen, dass Mixin Dateneigenschaften verwenden kann, die auf Komponenten definiert sind, was den Code zerbrechlich und schwer zu verstehen macht.

Kombinationsfunktionen k?nnen auch lokale Variablen aufrufen, die in Komponenten definiert sind. Der Unterschied besteht jedoch darin, dass diese Variable nun explizit an die kombinierte Funktion übergeben werden muss.

 usecompfitction von "./uSecompfunction" importieren;

Standard ausführen {
  aufstellen () {
    // ein lokaler Wert, der für die Kombinationsfunktion konstant mylocalval = ref (0) verwendet werden muss;

    // Es muss explizit als Parameter const {...} = useCompfunction (myLocalVal) übergeben werden;
  }
}

Zusammenfassen

Der Mixin -Modus sieht auf der Oberfl?che sehr sicher aus. Da es jedoch die Verwundbarkeit des Codes und die Art und Weise erh?ht, wie es die F?higkeit zum Verst?ndnis von Funktionen maskiert, wird das Freigeben von Code durch Zusammenführen von Objekten zu einem Anti-Muster.

Das cleverste an der Kompositions -API ist, dass VUE auf Sicherheitsma?nahmen, die in natives JavaScript integriert sind, zum Freigeben von Code, wie z. B. Variablen an Funktionen und Modulsysteme, integriert werden k?nnen.

Bedeutet dies, dass die Kompositions -API Vues klassischer API in jeder Hinsicht überlegen ist? Nein. In den meisten F?llen k?nnen Sie sich an die klassische API halten. Wenn Sie jedoch vorhaben, Ihren Code wiederzuverwenden, ist die Kompositions -API zweifellos eine bessere Wahl.

Das obige ist der detaillierte Inhalt vonWie die Vue -Komposition -API Vue Mixins ersetzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!