Vue.js-Tutorial, Teil 3: Externe Ressourcen und TypeScript

Miteinander sprechen

Dr. Fabian Deitelhoff

Der dritte und letzte Teil des Vue-Tutorials beschreibt den Zugriff auf externe Ressourcen, den Einsatz von TypeScript und das Ökosystem rund um Vue.js. Zudem gibt es einen Ausblick auf Version 3 des Frameworks.

Mit fortschreitender Entwicklung einer Vue-Anwendung entstehen Komponenten, die einander zwar stark ähneln, sich jedoch zu stark unterscheiden, als dass sie sich einfach zu einer verschmelzen ließen. Für diese Situation stellt Vue sogenannte Mixins zur Verfügung. Ein Mixin umfasst eine einzelne Funktion, die in verschiedenen Komponenten der Anwendung zum Einsatz kommen kann. Dieser Ansatz lässt sich mit einem funktionalen Stil vergleichen, weil er die „Moving Parts“ verringert. Damit sind die Codeteile gemeint, die ihn komplexer machen: Abfragen, Bedingungen, Entscheidungen im Allgemeinen. Das unterscheidet Mixins von der objektorientierten Programmierung, die darauf zielt, solche Teile zu kapseln.

Ein gut implementiertes Mixin ändert weder Zustände noch Daten außerhalb seines eigenen Geltungsbereichs. Weil es bei identischen Eingaben immer dasselbe Ergebnis erzeugt, ist es deterministisch.

Vue-Mixins ähneln Komponenten

Mit dieser Voraussetzung lässt sich ein erstes Mixin erstellen. Sein Aufbau ähnelt dem einer Komponente, denn es gibt Bereiche für Daten, Methoden und Lifecyle Hooks. Letztere bezeichnen Methoden in einer Vue-Komponente, die bei bestimmten Ereignissen in deren Leben aufgerufen werden, etwa beim Event created.

Listing 1: Mixin-Definition

const toggleMixin = {
  data: function() {
    return {
      show: false
    };
  },
  created: function() {
    this.show = true;
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};

Listing 1 zeigt die Definition des Mixins toggleMixin. Es verwendet einen Datenbereich mit der Eigenschaft show, die Lifecycle-Methode created und die Methode toggle. created illustriert lediglich die Funktionsweise von Lifecycle Hooks: Sobald Vue das Mixin erzeugt, läuft der Code in dieser Methode, der show auf true setzt. Alternativ könnte man den Wert beim Initialisieren der Eigenschaft direkt anpassen.

Zweck dieses simplen Mixins ist es, den immer gleichen Code für das Umschalten einer logischen Variablen auszulagern. Dadurch können ihn unterschiedliche Komponenten beispielsweise nutzen, um bei einem Klick etwas anzuzeigen oder auszublenden, wie messageComponent in Listing 2 zeigt.

Listing 2: Mixin-Verwendung

const messageComponent = {
  mixins: [toggleMixin],
  template:   '<div>
      <button @click="toggle()">Toggle Me!
      </button>
     <div v-if="show">The Message!</div>
   </div>'
};

Diese neue Komponente bekommt das Mixin durch die Option mixins hereingereicht. Dadurch kann sie dessen Methoden toggle und show verwenden. Hier dienen sie lediglich zum Ein- und Ausblenden einer Meldung nach Klick auf einen Button. Dasselbe Prinzip lässt sich in anderen Komponenten nutzen: Es muss kein Button sein, der toggle aufruft, und es muss kein div-Element sein, das man per show ein- und ausblendet.

Das funktioniert, weil Vue die Attribute eines Mixins (Datenbereich, Lifecycle Hooks, Methoden et cetera) mit denen einer Komponente „vermischt“. Danach besitzt diese sowohl ihre eigenen als auch die des Mixins. Grundsätzlich können Komponenten und Mixins identische Attribute definieren. Beider Datenbereiche kombiniert Vue rekursiv und lässt bei einem Konflikt die Komponente gewinnen. Dasselbe gilt für Methoden, andere Komponenten und Direktiven.

Rekursives Mischen von Datenbereichen

Bei den Lifecycle Hooks legt das Framework alle Funktionen in einem Array ab, sodass es sie nacheinander ausführen kann, beginnend mit denen des Mixins. Dadurch lassen sich Initialisierungen in einem Mixin durchführen, die anschließend einige Komponenten überschreiben können. Um ein Mixin zu nutzen, muss man es in der Komponente bekannt machen.