Mobile-Menu

Das Javascript-Framework Vue.js, Teil 8 Arbeiten mit der Composition-API von Vue

Von Dr. Dirk Koller 4 min Lesedauer

Anbieter zum Thema

Fujitsu Technology Solutions GmbH

Seit Version 3 des Vue.js-Frameworks steht Entwicklern und Entwicklerinnen die Composition API zur Realisierung ihrer Anwendungen zur Verfügung. Vor allem bei größeren Komponenten soll die neue Programmierschnittstelle ür mehr Ordnung sorgen.

Die Composition API von Vue.js kann dabei helfen, den Code besser zu strukturieren.(Bild: Gerd Altmann / Pixabay)
Die Composition API von Vue.js kann dabei helfen, den Code besser zu strukturieren.
(Bild: Gerd Altmann / Pixabay)

Bei der bis Vue.js 2.x enthaltenen Options-API wurden Daten, Methoden und Computed Properties in einem Options-Objekt übergeben. Die technisch bedingte Aufteilung (eben in Data, Methods und Computed) führte dabei dazu, dass logisch zusammengehörende Teile wie Methoden und Daten eines Features auseinandergerissen und mit Methoden und Daten anderer Features vermischt wurden. Der Code der resultierenden Komponenten war dadurch schwer verständlich und nicht wiederverwendbar.

Mit der Composition-API sollte sich das ändern. Herzstück der Programmierschnittstelle ist die Methode setup. Diese fasst Variablen, Methoden, Computed Properties, Lifecycle-Methoden und Watchers zusammen. Die Methode wird dann der Komponenten-Konfiguration zugefügt:

export default {
  setup() {
    // Variablen, Methoden usw.
  }
}

Refs: Verpackte Variablen

Daten, die vorher im Data-Objekt definiert wurden, werden jetzt mit der Ref-Funktion innerhalb von setup() angelegt. Ref erzeugt dabei einen Wrapper um den eigentlichen Wert. Es entstehen reaktive Variablen, Vue bekommt also mit, wenn sich die Variable ändert, und kann beispielsweise den Wert im Template aktualisieren:

let count = ref(0);

Damit das funktioniert, ist es erforderlich, Vue mitzuteilen, welche Variablen im Template verfügbar sein sollen. Sie werden deshalb als Rückgabewert der setup-Methode aufgeführt. Das folgende Codestück zeigt das an einem einfachen Beispiel. Die Variable count wird im Template verwendet und deshalb in setup zurückgegeben:

<template>
  <div>
    <h1>{{ count }}</h1>
  </div>
</template><script>
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    return { count };
  }
}
</script>

Funktionen, Computed Properties und Watchers

Neben Variablen haben auch andere Komponentenbestandteile wie Funktionen, Computed-Properties oder Watchers ihren Platz in setup. Die neue Art der Variablendefinition hat dabei Auswirkungen auf den Zugriff in diesen Funktionen. Innerhalb von setup ist es nicht mehr möglich, mit this auf Variablen zuzugreifen; die Komponenteninstanz ist zur Zeit der Ausführung von setup noch nicht verfügbar. Außerdem sind die Variablenwerte nun über die Eigenschaft value erreichbar.

Wie beschrieben erzeugt Ref ein Wrapper-Objekt und man möchte in der Regel den darin enthaltenen Wert verwenden. Diese Regel gilt allerdings nicht im Template, dort packt Vue den Wrapper automatisch aus und es kann direkt die Variable referenziert werden. Das folgende Beispiel zeigt eine in setup definierte Funktion und den Zugriff auf den Wert der Variablen count:

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increaseValue" >Erhöhe Wert</button>
  </div>
</template><script>
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increaseValue() {
      count.value = count.value + 1;
    }
    return { count, increaseValue };
  }
}
</script>

Auch in Computed Properties, die mit Hilfe der Funktion computed erstellt werden, muss auf value zugegriffen werden:

import { computed } from 'vue';
...
const doubleCount = computed(() => {
  return count.value * 2;
});

Beim Beobachten von Variablen mit watch wird dagegen nur der Variablenname als Parameter aufgeführt:

import { watch } from 'vue';
...
watch(count, (currentValue, oldValue) => {
  console.log("current: " + currentValue);
  console.log("old:" + oldValue);
});

Props werden wie gewohnt in der Komponentenkonfiguration definiert, sind aber aus den oben geschilderten Gründen ebenfalls nicht mehr mit this erreichbar. Da der Zugriff auf Props aber unverzichtbar ist, werden sie der setup-Methode als Parameter übergeben und können so benutzt werden. Ähnliches gilt für die Variable context, mit der sich Events auslösen lassen:

export default {
  props: {
    msg: String
  },
  setup(props, context) {
    console.log(props.msg)
    console.log(context.emit);
    ...
  }
}

Composables

Wer eine größere Komponente mit den beschriebenen Techniken umbaut, wird danach womöglich feststellen, dass die Übersichtlichkeit noch nicht wirklich zugenommen hat. Aber keine Angst, das Beste kommt zum Schluss: Zusammengehörige Daten, Funktionen, Computed Properties und Watchers aus setup lassen sich in sogenannte Composables auslagern. Das führt dann zur gewünschten Strukturierung und Wiederverwendbarkeit des Codes und ist das eigentliche Ziel der Übung.

Das folgende Codestück zeigt ein Beispiel für ein Composable in einer separaten Datei counter.js.:

import { ref } from "vue";export function useCounter() {
  let count = ref(0);
  function increaseValue() {
    count.value = count.value + 1;
  }  return { count, increaseValue };
}

In der Funktion useCounter werden alle Variablen und Funktionen die zur gewünschten Funktionalität gehören ausgelagert. Gemäß Konvention sollten Composable-Funktionen immer mit use beginnen. Rückgabewert der Funktion sind die Bestandteile, die von außen genutzt werden.

Das Einbinden erfolgt dann durch Import des Composable und Aufruf der use-Funktion:

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu RZ- und Server-Technik

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung. Die Einwilligungserklärung bezieht sich u. a. auf die Zusendung von redaktionellen Newslettern per E-Mail und auf den Datenabgleich zu Marketingzwecken mit ausgewählten Werbepartnern (z. B. LinkedIn, Google, Meta).

Aufklappen für Details zu Ihrer Einwilligung
<template>
  <div>
    <h1>{{ count }}</h1>
    <h2>{{ doubleCount }}</h2>
    <button @click="increaseValue">Erhöhe Wert</button>
  </div>
</template><script>
import { useCounter } from "../counter.js";export default {
  setup() {
    let { count, increaseValue } = useCounter();
    ...
    return { count, increaseValue };
  },
};
</script>

Das Feature Counter ist somit in eine separate Datei ausgelagert worden und könnte von anderen Komponenten wiederverwendet werden. In diesem einfachen Beispiel ist der Nutzen begrenzt, aber die Idee ist wohl ersichtlich. Die neue Composition-API lässt sich mit der Options-API mischen, und kann mit dem Plug-in Composition-API auch in Vue 2 verwendet werden. Für welche API man sich entscheidet, ist Geschmackssache, für größere Anwendungen und Komponenten bietet die Composition-API auf jeden Fall Vorteile.

(ID:48160347)

Weiterführende Inhalte