Wie die Vue -Komposition -API Vue Mixins ersetzt

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!