Detaillierte Erläuterung der Wiederverwendung und Erweiterung von Vue-Komponenten

Überblick

Ein wichtiges Prinzip der Softwareprogrammierung ist DRY (Don’t Repeat Yourself). Dabei geht es darum, Code und Logik so weit wie möglich wiederzuverwenden, um Duplikate zu vermeiden. Komponentenerweiterungen können die Duplizierung von Code vermeiden und die schnelle Entwicklung und Wartung vereinfachen. Was ist also der beste Weg, eine Vue-Komponente zu erweitern?

Vue bietet eine Reihe von APIs und Mustern zur Unterstützung der Wiederverwendung und Erweiterung von Komponenten. Sie können je nach Zweck und Präferenz wählen.

In diesem Artikel werden mehrere gängige Methoden und Muster vorgestellt. Ich hoffe, er ist für Sie hilfreich.

Ist die Erweiterung notwendig?

Bedenken Sie, dass alle Methoden zur Komponentenerweiterung die Komplexität erhöhen, zusätzlichen Code schreiben und manchmal zu einem erhöhten Leistungsaufwand führen.

Bevor Sie sich für die Erweiterung einer Komponente entscheiden, sollten Sie daher prüfen, ob es andere, einfachere Entwurfsmuster gibt, mit denen Sie Ihre Ziele erreichen können.

Um Erweiterungskomponenten zu ersetzen, reichen in der Regel die folgenden Komponenten-Entwurfsmuster aus:

• Requisiten mit Vorlagenlogik
• Slot
• JavaScript-Hilfsfunktionen

Requisiten mit Vorlagenlogik

Am einfachsten geht das durch die Verwendung von Requisiten in Kombination mit bedingtem Vorlagen-Rendering, um eine Multifunktionalität der Komponente zu erreichen.

Beispielsweise durch das Typattribut:
MeineVersatileComponent.vue

<Vorlage>
  <div Klasse="Wrapper">
    <div v-if="Typ === 'a'">...</div>
    <div v-else-if="Typ === 'b'">...</div>
    <!--usw. usw.-->
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: { Typ: String },
  ...
}
</Skript>

Bei der Verwendung einer Komponente kann die Übergabe unterschiedlicher Typwerte zu unterschiedlichen Ergebnissen führen.

// *ÜbergeordneteKomponente.vue*
<Vorlage>
  <MyVersatileComponent Typ="a" />
  <MyVersatileComponent Typ="b" />
</Vorlage>

Wenn die folgenden beiden Situationen auftreten, bedeutet dies, dass dieser Modus nicht anwendbar ist oder falsch verwendet wird:

• Das Komponentenzusammensetzungsmuster zerlegt Status und Logik in atomare Teile und macht die Anwendung skalierbar. Wenn die Komponente viele bedingte Urteile enthält, sind Lesbarkeit und Wartbarkeit schlecht.
• Die ursprüngliche Absicht von Props und Template-Logik besteht darin, Komponenten dynamisch zu gestalten, es kommt jedoch auch zu einem Ressourcenverbrauch zur Laufzeit. Wenn Sie diesen Mechanismus verwenden, um Codekompositionsprobleme zur Laufzeit zu lösen, handelt es sich um ein Antimuster.

Slot

Eine weitere Möglichkeit, Komponentenerweiterungen zu vermeiden, besteht in der Verwendung von Slots, die es der übergeordneten Komponente ermöglichen, benutzerdefinierte Inhalte in der untergeordneten Komponente festzulegen.

// *MeineVersatileComponent.vue*
<Vorlage>
  <div Klasse="Wrapper">
    <h3>Gemeinsame Auszeichnung</div>
    <Steckplatz />
  </div>
</Vorlage>

// *ÜbergeordneteKomponente.vue*
<Vorlage>
  <Meine vielseitige Komponente>
    <h4>Einstecken in den Steckplatz</h4>
  </MeineVersatileComponent>
</Vorlage>

Rendering-Ergebnis:

<div Klasse="Wrapper">
  <h3>Gemeinsame Auszeichnung</div>
  <h4>Einstecken in den Steckplatz</h4>
</div>

Eine mögliche Einschränkung dieses Musters besteht darin, dass Elemente innerhalb des Slots dem Kontext der übergeordneten Komponente untergeordnet sind, was bei der Trennung von Logik und Status möglicherweise nicht natürlich ist. Scoped Slots sind flexibler und werden später im Abschnitt zu renderlosen Komponenten erwähnt.

JavaScript-Hilfsfunktionen

Wenn Sie nur unabhängige Funktionen zwischen Komponenten wiederverwenden müssen, müssen Sie nur diese JavaScript-Module extrahieren und müssen den Komponentenerweiterungsmodus überhaupt nicht verwenden.

Das Modulsystem von JavaScript ist eine sehr flexible und robuste Möglichkeit, Code gemeinsam zu nutzen. Sie sollten sich daher, wann immer möglich, darauf verlassen.
MyUtilityFunction.js

Standardfunktion exportieren () {
  ...
}

MeineKomponente.vue

importiere MyUtilityFunction aus "./MyUtilityFunction";
Standard exportieren {
  Methoden: {
    MeineDienstprogrammfunktion
  }
}

Mehrere Modi von Erweiterungskomponenten

Wenn Sie die oben genannten einfachen Modi in Betracht gezogen haben, diese Modi jedoch nicht flexibel genug sind, um Ihren Anforderungen zu entsprechen. Dann können Sie über eine Erweiterung der Komponenten nachdenken.

Es gibt vier gängige Möglichkeiten zum Erweitern von Vue-Komponenten:

• Kompositionsfunktion
• Mixins
• Komponenten höherer Ordnung (HOCs)
• Keine Renderkomponente

Jede Methode hat ihre Vor- und Nachteile und ist je nach Anwendungsszenario mehr oder weniger anwendbar.

Kompositions-API

Der neueste Ansatz zum Teilen von Status und Logik zwischen Komponenten ist die Composition API. Dies ist eine in Vue 3 eingeführte API und kann auch als Plug-In in Vue 2 verwendet werden.

Anders als beim bisherigen Verfahren zum Deklarieren von Daten, Berechnungen, Methoden und anderen Eigenschaften im Konfigurationsobjekt der Komponentendefinition deklariert die Composition API diese Konfigurationen über eine Setup-Funktion und gibt sie zurück.

Das Deklarieren einer Counter- Komponente mithilfe von Vue 2-Konfigurationseigenschaften sieht beispielsweise folgendermaßen aus:
Zähler.vue

<Vorlage>
  <button @click="erhöhen">
    Die Anzahl beträgt: {{ count }}, das Doppelte beträgt: {{ double }}
  </button>
<Vorlage>
<Skript>
Standard exportieren {
  Daten: () => ({
    Anzahl: 0
  }),
  Methoden: {
    inkrementieren() {
      dies.zählen++;
    }
  },
  berechnet: {
    doppelt () {
      gib dies zurück.Anzahl * 2;
    }
  }
}
</Skript>

Das Refactoring dieser Komponente mithilfe der Composition API bietet genau die gleiche Funktionalität:
Zähler.vue

<Vorlage><!--wie oben--><Vorlage>
<Skript>
importiere { reaktiv, berechnet } von "vue";

Standard exportieren {
  aufstellen() {
    const state = reaktiv({
      Anzahl: 0,
      double: berechnet(() => Zustand.Anzahl * 2)
    });

    Funktion Inkrement() {
      Zustand.Anzahl++
    }

    zurückkehren {
      zählen,
      doppelt,
      Inkrement
    }
  }
}
</Skript>

Einer der Hauptvorteile der Deklaration von Komponenten mit der Composition API besteht darin, dass die Wiederverwendung und Extraktion von Logik sehr einfach wird.

Lassen Sie uns das Refactoring weiterführen und die Zählerfunktionalität in das JavaScript-Modul useCounter.js verschieben:
useCounter.js

importiere { reaktiv, berechnet } von "vue";

Standardfunktion exportieren {
  const state = reaktiv({
    Anzahl: 0,
    double: berechnet(() => Zustand.Anzahl * 2)
  });

  Funktion Inkrement() {
    Zustand.Anzahl++
  }

  zurückkehren {
    zählen,
    doppelt,
    Inkrement
  }
}

Jetzt kann die Zählerfunktionalität nahtlos in jede Vue-Komponente über die Setup-Funktion eingeführt werden:
MeineKomponente.vue

<template><!--wie oben--></template>
<Skript>
importiere useCounter aus "./useCounter";

Standard exportieren {
  aufstellen() {
    const { Anzahl, Doppelt, Inkrement } = useCounter();
    zurückkehren {
      zählen,
      doppelt,
      Inkrement
    }
  }
}
</Skript>

Kompositionsfunktionen machen Funktionen modular und wiederverwendbar und stellen die direkteste und kostengünstigste Möglichkeit dar, Komponenten zu erweitern.

Nachteile der Composition API

Die Nachteile der Composition API sind nicht wirklich groß – sie sieht möglicherweise etwas wortreich aus und die neuen Redewendungen sind einigen Vue-Entwicklern möglicherweise unbekannt.

Eine Diskussion über die Vor- und Nachteile der Composition API finden Sie hier: Wann Sie die neue Vue Composition API verwenden sollten (und wann nicht)

Mixins

Wenn Sie noch Vue 2 verwenden oder einfach Komponentenfunktionen als Konfigurationsobjekte definieren möchten, können Sie den Mixin-Modus verwenden. Mixins extrahieren gemeinsame Logik und Status in separate Objekte und führen sie mit den Objekten zusammen, die innerhalb der Komponenten definiert sind, die das Mixin verwenden.

Wir fahren mit dem vorherigen Beispiel der Counter- Komponente fort und fügen die gemeinsame Logik und den Status in das Modul CounterMixin.js ein.
CounterMixin.js

Standard exportieren {
  Daten: () => ({
    Anzahl: 0
  }),
  Methoden: {
    inkrementieren() {
      dies.zählen++;
    }
  },
  berechnet: {
    doppelt () {
      gib dies zurück.Anzahl * 2;
    }
  }
}

Die Verwendung von Mixins ist ebenfalls sehr einfach: Importieren Sie einfach das entsprechende Modul und fügen Sie die Variablen zum Mixins-Array hinzu. Wenn die Komponente initialisiert wird, wird das Mixin-Objekt mit dem innerhalb der Komponente definierten Objekt zusammengeführt.
MeineKomponente.vue

importiere CounterMixin aus "./CounterMixin";

Standard exportieren {
  Mixins: [CounterMixin],
  Methoden: {
    dekrementieren() {
      dies.zählen--;
    }
  }
}

Optionenzusammenführung

Was passiert, wenn die Optionen in der Komponente mit dem Mixin in Konflikt stehen?

Wenn Sie beispielsweise eine integrierte Inkrementmethode für eine Komponente definieren, welche hat die höhere Priorität?
MeineKomponente.vue

importiere CounterMixin aus "./CounterMixin";

Standard exportieren {
  Mixins: [CounterMixin],
  Methoden: {
    // Wird die native Methode „Inkrement“ das „Inkrement“ des Mixins überschreiben?
    inkrementieren() { ... }
  }
}

Jetzt müssen wir über die Zusammenführungsstrategie von Vue sprechen. Vue verfügt über einen Satz von Regeln, die bestimmen, wie mit Optionen mit demselben Namen umgegangen wird.

Normalerweise überschreiben Komponentenoptionen Optionen aus einem Mixin. Es gibt aber auch Ausnahmen. So werden Lifecycle-Hooks des gleichen Typs nicht direkt überschrieben, sondern in ein Array gepackt und nacheinander ausgeführt.

Sie können das Standardverhalten auch ändern, indem Sie eine benutzerdefinierte Zusammenführungsstrategie definieren.

Nachteile von Mixins

Als Muster zum Erweitern von Komponenten eignet sich Mixin gut für einfache Szenarien, bei größeren Skalierungen treten jedoch Probleme auf. Sie müssen nicht nur auf Namenskonflikte achten (insbesondere bei Mixins von Drittanbietern), sondern bei der Verwendung von Komponenten mit mehreren Mixins ist es auch schwierig herauszufinden, woher eine bestimmte Funktion stammt, und es ist auch schwierig, das Problem zu lokalisieren.

Komponenten höherer Ordnung

Higher-Order-Components (HOC) sind ein von React übernommenes Konzept und können auch in Vue verwendet werden.

Um dieses Konzept zu verstehen, lassen wir die Komponenten außen vor und betrachten zwei einfache JavaScript-Funktionen: „increment“ und „double“.

Funktion Inkrement(x) {
  gibt x++ zurück;
}

Funktion double(x) {
  gebe x * 2 zurück;
}

Angenommen, wir möchten beiden Funktionen eine Funktion hinzufügen: die Ergebnisse in der Konsole ausgeben.

Dazu können wir das Funktionsmuster höherer Ordnung verwenden und eine neue addLogging-Funktion erstellen, die eine Funktion als Parameter akzeptiert und eine Funktion mit der hinzugefügten Funktionalität zurückgibt.

Funktion addLogging(fn) {
  Rückgabefunktion (x) {
    const Ergebnis = fn(x);
    console.log("Das Ergebnis ist: ", Ergebnis);
    Ergebnis zurückgeben;
  };
}

const incrementWithLogging = addLogging(increment);
const doubleWithLogging = addLogging(double);

Wie können Komponenten dieses Muster nutzen? In ähnlicher Weise erstellen wir eine Komponente höherer Ordnung, um die Zählerkomponente zu rendern, und fügen eine Dekrementmethode als Instanzeigenschaft hinzu.

Der eigentliche Code ist komplizierter, deshalb geben wir hier nur den Pseudocode zur Veranschaulichung an:

Zähler aus "./Counter" importieren;

// Pseudocode const CounterWithDecrement => ({
  rendern(Element erstellen) {
    const Optionen = {
      dekrementieren() {
        dies.zählen--;
      }
    }
    returniere createElement(Zähler, Optionen);
  }
});

Der HOC-Modus ist einfacher und erweiterbarer als Mixin, allerdings auf Kosten einer zusätzlichen Wrapper-Komponente, deren Implementierung ebenfalls entsprechende Kenntnisse erfordert.

Keine Renderkomponente

Wenn Sie für mehrere Komponenten die gleiche Logik und den gleichen Status verwenden, diese aber nur unterschiedlich anzeigen müssen, können Sie das renderlose Komponentenmuster in Betracht ziehen.

Dieses Muster erfordert zwei Arten von Komponenten: Logikkomponenten werden zum Deklarieren von Logik und Status verwendet und Präsentationskomponenten werden zum Anzeigen von Daten verwendet.

Logikkomponenten

Kehren wir zum Beispiel mit dem Zähler zurück. Nehmen wir an, wir müssen diese Komponente an mehreren Stellen wiederverwenden, sie aber unterschiedlich anzeigen.

Erstellen Sie ein CounterRenderless.js, um eine logische Komponente einschließlich Logik und Status, jedoch ohne Vorlage zu definieren. Deklarieren Sie stattdessen einen Bereichsslot über die Renderfunktion.

Der Bereichsslot stellt der übergeordneten Komponente drei Eigenschaften zur Verfügung: die Statusanzahl, das Methodeninkrement und die berechnete Eigenschaft „Double“.
CounterRenderless.js

Standard exportieren {
  Daten: () => ({
    Anzahl: 0
  }),
  Methoden: {
    inkrementieren() {
      dies.zählen++;
    }
  },
  berechnet: {
    doppelt () {
      gib dies zurück.Anzahl * 2;
    }
  },
  rendern() {
    gib dies zurück.$scopedSlots.default({
      zählen: dies.zählen,
      doppelt: dies.doppelt,
      Inkrement: this.toggleState,
    })
  }
}

Der hier festgelegte Steckplatz ist der Schlüssel zur Logikkomponente in diesem Muster.

Präsentationskomponenten

Als nächstes folgt die Anzeigekomponente , die als Benutzer der renderlosen Komponente eine bestimmte Anzeigemethode bereitstellt.

Alle Element-Tags sind in bereichsbezogenen Slots enthalten. Wie Sie sehen, werden diese Eigenschaften genauso verwendet, als ob die Vorlage direkt in der Logikkomponente platziert wäre.
ZählerWithButton.vue

<Vorlage>
  <counter-renderless slot-scope="{Anzahl, doppelt, Inkrement}">
    <div>Anzahl ist: {{ count }}</div> 
    <div>Double ist: {{ double }}</div>
    <button @click="increment">Erhöhen</button>
  </Zähler-Renderless>
</Vorlage>
<Skript>
importiere CounterRenderless aus "./CountRenderless";
Standard exportieren {
  Komponenten:
    ZählerRenderless
  }
}
</Skript>

Das renderlose Komponentenmuster ist sehr flexibel und leicht zu verstehen. Es ist jedoch nicht so allgemein wie die vorherigen Methoden und hat möglicherweise nur ein Anwendungsszenario, nämlich die Entwicklung von Komponentenbibliotheken.

Vorlagenerweiterung

Sowohl die oben genannte API als auch das Entwurfsmuster unterliegen der Einschränkung, dass die Komponentenvorlage nicht erweitert werden kann. Vue bietet Möglichkeiten zur Wiederverwendung von Logik und Status, ist jedoch machtlos, wenn es um Vorlagen-Tags geht.

Es gibt eine etwas ausgefeiltere Methode, bei der die Vorlagenerweiterung mit einem HTML-Präprozessor wie Pug erfolgt.

Der erste Schritt besteht darin, eine Basisvorlagendatei (.pug ) zu erstellen, die allgemeine Seitenelemente enthält. Fügen Sie außerdem eine Blockeingabe als Platzhalter für die Vorlagenerweiterung ein.

BaseTemplate.pug

div.wrapper
  h3 {{ myCommonProp }} <!--gemeinsame Auszeichnung-->
  Blockeingabe <!--erweiterter Markup-Outlet -->

Um diese Vorlage zu erweitern, müssen Sie das Pug-Plugin für Vue Loader installieren. Anschließend können Sie die Basisvorlage importieren und den Platzhalter mithilfe der Block-Eingabesyntax ersetzen:
MeineKomponente.vue

<template lang="pug">
  erweitert BaseTemplate.pug
  Blockeingabe
    h4 {{ myLocalProp }} <!--wird in die Basisvorlage aufgenommen-->
</Vorlage>

Zunächst könnte man meinen, es handele sich um dasselbe Konzept wie bei Slot, es gibt jedoch einen Unterschied: Die Basisvorlage gehört hier nicht zu einer einzelnen Komponente. Es wird zur Kompilierzeit mit der aktuellen Komponente zusammengeführt und nicht wie Slots zur Laufzeit ersetzt.

Oben finden Sie eine ausführliche Erläuterung zur Wiederverwendung und Erweiterung von Vue-Komponenten. Weitere Informationen zur Wiederverwendung und Erweiterung von Vue-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!