Composition API und Reaktivität

Composition API und Reaktivität

0:00 Wir kommen zum Herzstück. In den bisherigen Modulen haben Sie Dinge verwendet, die einfach funktioniert haben — Werte, die sich ändern, und Anzeigen, die nachziehen. Heute sehen wir uns an, wie das eigentlich funktioniert und welche Regeln dabei gelten. Es geht um die Composition API, um den Unterschied zwischen den beiden Arten, reaktiven Zustand anzulegen, um den Lebenszyklus einer Komponente und am Ende darum, wie Sie Logik aus einer zu groß gewordenen Komponente wieder herausbekommen.

0:28 Das ist das Modul, nach dem vieles klickt.

Motivation und Vorteile der Composition API

0:31 Beginnen wir mit einer Einordnung. In Vue 3 gibt es zwei Arten, eine Komponente zu schreiben, und Sie werden beiden begegnen. Die eine ist die ältere und wirkt zunächst freundlicher, die andere ist die, mit der wir arbeiten. Ich möchte Ihnen zeigen, welches Problem die neuere löst — und ehrlicherweise auch, was sie kostet. Denn kostenlos ist der Umstieg nicht.

0:52 Wer aus der älteren Welt kommt, verliert am Anfang Tempo, bevor er es zurückgewinnt. Das gehört zu einer ehrlichen Einordnung dazu. Der Unterschied lässt sich an einem Bild festmachen. Stellen Sie sich eine Werkstatt vor, in der alle Schraubenzieher in einer Schublade liegen, alle Zangen in einer zweiten und alle Schrauben in einer dritten.

1:13 Ordentlich — aber für eine bestimmte Reparatur laufen Sie zu drei Schubladen. Die Alternative ist eine Kiste je Reparatur, in der alles zusammenliegt, was dafür gebraucht wird. Genau das ist der Unterschied: Die ältere Art sortiert nach Werkzeugart, die neuere nach Anliegen. Bei kleinen Komponenten spielt das keine Rolle. Bei großen sehr.

1:33 Fünf Zeilen Gegenüberstellung, und die vierte ist die, die im Alltag am meisten ausmacht: der Zugriff. In der älteren Variante liegt alles an einem Instanzobjekt, das man über ein Schlüsselwort anspricht. In der neueren sind es gewöhnliche Variablen. Das klingt nach einem Detail, hat aber eine praktische Folge — Werkzeuge kommen mit gewöhnlichen Variablen viel besser zurecht.

1:55 Umbenennen, Referenzen finden, tote Zuweisungen erkennen: All das funktioniert. Der Hinweis unten ist die offizielle Empfehlung der Dokumentation für vollständige Anwendungen. Der zweite Punkt beschreibt eine Erfahrung, die jeder kennt, der eine große Komponente gepflegt hat: Man springt beim Lesen zwischen vier Blöcken hin und her, um einen einzigen Vorgang zu verstehen.

2:18 Bei fünfzig Zeilen ist das lästig, bei fünfhundert ist es ein echtes Hindernis. Der letzte Punkt ist der wichtigste für die Zukunft: Wiederverwendung. Die ältere Variante hatte dafür ein Werkzeug, bei dem man nicht sehen konnte, woher eine Eigenschaft kommt. Die neuere gibt Werte zurück wie eine normale Funktion — die Herkunft steht in der Zeile.

2:38 Der erste Punkt ist mir wichtig: Die ältere Variante ist nicht veraltet. Sie wird vollwertig unterstützt, und für eine Seite ohne Bauprozess mit einer Handvoll Feldern ist sie oft der einfachere Weg. Es geht hier nicht um besser und schlechter, sondern um die Frage, was zur Größe des Vorhabens passt. Der letzte Punkt ist die ehrliche Kehrseite: Der Umstieg kostet zunächst Tempo. Die Reaktivitätsregeln sind ausdrücklicher, und man stolpert am Anfang öfter.

3:05 Das gibt sich, aber ich will es nicht verschweigen.

Aufbau von Komponenten mit Composition API

3:08 Jetzt sehen wir uns die ausgeschriebene Form an — also die Variante ohne die Kurzschreibweise, die wir bisher benutzt haben. Sie werden sie im Alltag selten schreiben, aber Sie sollten sie einmal gesehen haben. Denn sie erklärt, warum die Kurzform sich so verhält, wie sie sich verhält, und sie begegnet Ihnen in Bibliotheksbeispielen und in älterem Code.

3:28 Es ist eine dieser Investitionen, die sich nicht heute auszahlen, sondern beim ersten fremden Projekt — dann aber sofort. Der wichtige Satz ist der zweite: Die Setup-Funktion läuft einmal je Instanz, bevor gerendert wird. Einmal — nicht bei jeder Aktualisierung. Das ist ein Unterschied zu manchen anderen Frameworks, wo die Komponentenfunktion bei jedem Rendern erneut durchläuft. In Vue passiert das nicht.

3:53 Was Sie in der Setup-Funktion anlegen, existiert genau einmal und bleibt bestehen. Der zweite wichtige Punkt: Nur was zurückgegeben wird, ist im Template sichtbar. Genau diesen Rückgabeschritt nimmt Ihnen die Kurzform ab. Hier steht die Mechanik offen da. Sie sehen die Funktion, die einmal läuft, Sie sehen die Werte, die darin entstehen, und Sie sehen die Rückgabe, die festlegt, was das Template kennt.

4:17 Wenn Sie sich diese Rückgabe wegdenken und alles Übrige stehen lassen, haben Sie im Kopf, was die Kurzform tut — sie gibt automatisch alles zurück, was auf oberster Ebene steht. Das ist der ganze Zauber. Deshalb taucht in der Kurzform jede Variable im Template auf, ohne dass Sie etwas dafür tun. Der dritte Punkt ist der, den ich hervorheben möchte, weil er ein häufiges Missverständnis auflöst: Die Setup-Funktion läuft genau einmal.

4:43 Wer aus React kommt, hat oft das Modell im Kopf, dass die Komponentenfunktion bei jeder Änderung neu durchläuft — und wundert sich dann, warum in Vue eine Konstante nicht neu berechnet wird. In Vue ist das anders, und die ausgeschriebene Form macht es sichtbar. Für dynamisch erzeugte Komponenten ohne eigene Datei bleibt sie außerdem der einzige Weg.

5:03 Der zweite Punkt ist der ärgerlichste in dieser Schreibweise: eine vergessene Rückgabe. Das Ergebnis ist keine Fehlermeldung, sondern eine leere Stelle im Template — und Sie suchen im falschen Bereich. Genau deshalb ist die Kurzform der Alltagsweg. Der letzte Punkt ist eine praktische Information: Eingaben kommen in der ausgeschriebenen Form als erstes Argument der Funktion, nicht über das Instanzobjekt.

5:26 Das ist konsequent, denn ein Instanzobjekt gibt es zu diesem Zeitpunkt noch gar nicht.

Nutzung von script setup

5:32 Und jetzt zu der Schreibweise, die Sie tatsächlich benutzen werden. Sie ist Zucker zur Übersetzungszeit — der Compiler baut daraus die ausgeschriebene Form, die wir eben gesehen haben. Was sie besonders macht, sind ein paar Funktionen, die es nur dort gibt und die man nicht importieren muss. Die sehen wir uns an, inklusive der Regeln, die für sie gelten.

5:52 Und es gibt eine Eigenschaft dieser Schreibweise, die man kennen sollte, weil sie später Fragen aufwirft: Sie macht Komponenten nach außen dicht. Der Satz, den ich hervorheben möchte, steht am Ende: Der Block läuft bei jeder Instanz erneut. Das ist der Unterschied zu einem gewöhnlichen Skript-Block, der einmal beim Laden des Moduls läuft.

6:11 Wenn Sie also eine Komponente zwanzigmal auf der Seite haben, läuft dieser Code zwanzigmal, und jede Instanz bekommt ihren eigenen Zustand. Das klingt selbstverständlich, ist aber genau der Punkt, an dem Anfänger versehentlich Zustand teilen — nämlich wenn sie ihn außerhalb des Blocks deklarieren. Sechs besondere Funktionen, und die Fußzeile ist wichtig: Sie werden nicht importiert. Der Compiler kennt sie und ersetzt sie beim Übersetzen.

6:37 Das erklärt auch eine Einschränkung, die gleich kommt — sie lassen sich nicht dynamisch aufrufen, etwa in einer Bedingung, weil zur Übersetzungszeit feststehen muss, was sie deklarieren. Die ersten drei kennen Sie schon aus Modul 4 und 2. Die vierte brauchen Sie, wenn eine Komponente etwas nach außen sichtbar machen soll — die Kurzform macht Komponenten nämlich standardmäßig dicht.

6:59 Sehen Sie sich an, wie wenig Zeremonie hier steht: Importe, Werte, fertig. Kein Export, keine Rückgabe, keine Registrierung der Kindkomponente. Der Import der Kindkomponente genügt — der Compiler sieht, dass die Variable im Template als Tag verwendet wird, und verbindet beides. Das ist einer der Punkte, an denen sich die Kurzform im Alltag wirklich auszahlt: In der ausgeschriebenen Form müssten Sie die Komponente zusätzlich in einem eigenen Block anmelden.

7:27 Der erste Punkt überrascht viele: Eine Komponente in dieser Schreibweise ist von außen geschlossen. Wenn Sie über eine Referenz auf eine Kindkomponente zugreifen wollen, sehen Sie nichts — es sei denn, die Komponente gibt ausdrücklich etwas frei. Das ist eine bewusste Entscheidung für saubere Grenzen. Der dritte Punkt ist eine feine Unterscheidung, die man kennen sollte: Ein zusätzlicher normaler Skript-Block läuft einmal je Modul, nicht je Instanz.

7:53 Dort gehört hin, was wirklich nur einmal passieren soll.

Reaktivität mit ref und reactive

7:57 Jetzt zum Kern des Moduls: Wie entsteht eigentlich ein reaktiver Wert? Vue bietet dafür zwei Funktionen an, und die Frage, wann man welche nimmt, gehört zu den meistgestellten überhaupt. Ich gebe Ihnen darauf eine klare Antwort — und erkläre die eine Eigenheit, über die wirklich jeder am Anfang stolpert und die sich mit einem Satz erklären lässt.

8:16 Wenn Sie dieses Kapitel verstanden haben, lösen sich rückwirkend eine Menge kleiner Merkwürdigkeiten aus den ersten vier Modulen auf. Die eine Variante verpackt einen Wert in einen Behälter, die andere macht ein Objekt selbst reaktiv. Stellen Sie sich den Behälter wie ein Postfach vor: Vue kann beobachten, ob jemand hineingreift, weil es genau einen Zugang gibt.

8:37 Bei der zweiten Variante wird das Objekt selbst überwacht — dafür braucht es aber ein Objekt, ein einzelner Zahlenwert lässt sich so nicht behandeln. Beide sind übrigens tief reaktiv: Auch eine Änderung weit unten in einer verschachtelten Struktur wird bemerkt. Vier Zeilen, die den Unterschied zeigen. Oben der Behälter, den Sie über eine Eigenschaft ansprechen. Unten das reaktive Objekt, bei dem Sie die Felder direkt setzen.

9:03 Und hier ist die Erklärung für die Eigenheit, die Sie seit Modul 1 begleitet: Im Skript brauchen Sie den Zugang zum Postfach, im Template nicht. Vue packt beim Rendern automatisch aus, weil dort ohnehin nur Werte interessieren. Der Zusatz wäre reines Rauschen im Markup — und genau deshalb gibt es diese Ausnahme. Diese fünf Zeilen sind es wert, dass Sie sie einmal genau lesen — hier steckt der häufigste Stolperstein von ganz Vue.

9:29 Die ersten drei Zeilen sind angenehm: Vue packt aus, wo es sinnvoll ist. Die letzten beiden sind die Ausnahmen, und zwar genau die, die keiner erwartet. In einem Array oder in einer Map wird nicht ausgepackt. Der Grund ist technisch nachvollziehbar — Vue müsste sonst bei jedem Zugriff prüfen, ob ein Element ein Behälter ist.

9:48 Praktisch heißt es: Dort brauchen Sie den Zugang wieder. Hier ist die klare Antwort, die ich versprochen habe: Nehmen Sie im Zweifel die Behältervariante. Der zweite Punkt ist der ausschlaggebende — Sie können den Wert komplett ersetzen, ohne die Reaktivität zu verlieren. Bei der anderen Variante geht genau das nicht, und das ist im Alltag ein häufiger Fall: Sie laden Daten und wollen den ganzen Datensatz austauschen.

10:12 Der letzte Punkt ist weicher, aber nicht unwichtig: Der Zugang über die Eigenschaft macht beim Lesen sichtbar, dass hier etwas Reaktives steht. Der erste Punkt ist der teuerste: Ein reaktives Objekt neu zuzuweisen kappt die Verbindung — still, ohne Fehler. Die Anzeige bleibt einfach auf dem alten Stand stehen. Der zweite Punkt ist der gleiche Effekt beim Zerlegen: Wenn Sie Felder herausziehen, bekommen Sie gewöhnliche Werte ohne jede Verbindung zur Quelle.

10:40 Und der letzte Punkt beschreibt das Symptom, an dem Sie ein vergessenes .value erkennen: Statt einer Zahl steht plötzlich NaN auf dem Bildschirm. Wenn Sie das sehen, wissen Sie jetzt, wo Sie suchen.

Vergleich unterschiedlicher Reaktivitätsmethoden

10:52 Neben den beiden Grundvarianten gibt es noch ein paar weitere Werkzeuge, und ich möchte kurz Ordnung hineinbringen. Das ist überschaubarer, als es zunächst aussieht — und am Ende steht eine Faustregel, mit der Sie in neunzig Prozent der Fälle richtig liegen. Die restlichen zehn Prozent erkennen Sie daran, dass Sie ein konkretes Problem gemessen haben.

11:12 Das ist überhaupt der rote Faden dieses Kapitels: Erst messen, dann optimieren — und nicht umgekehrt. Die Aufzählung nennt vier Kategorien: die beiden Grundvarianten, die Ableitung für berechnete Werte, die flachen Varianten für große Datenmengen und den Schreibschutz für die Weitergabe. Mehr ist es nicht. Der letzte Satz ist mir wichtig: Für den Alltag genügt eine einfache Regel.

11:34 Ich sehe häufig, dass Leute lange über die Wahl des richtigen Reaktivitätswerkzeugs nachdenken — und diese Zeit wäre in der Frage besser angelegt, welchen Zustand die Komponente überhaupt braucht. Fünf Zeilen, und die Faustregel steht in der Fußzeile: Behälter für alles, Ableitung für alles Berechnete, der Rest bei konkretem Bedarf.

11:53 Die vierte Zeile verdient eine Erklärung: Die flache Variante verfolgt nur den Austausch des ganzen Werts, nicht Änderungen darin. Das ist gedacht für große Strukturen, die ohnehin immer komplett ersetzt werden — etwa eine geladene Datenmenge. Die letzte Zeile ist praktisch, wenn Sie Zustand weitergeben, aber nicht wollen, dass der Empfänger ihn ändert. Dazu mehr in Modul 7.

12:16 Der letzte Punkt ist der, den ich unterstreichen möchte: Eine Optimierung ohne Messung ist meist eine Verschlechterung. Tiefe Reaktivität kostet etwas, ja — aber erst bei wirklich großen Strukturen, und dann merken Sie es. Wer vorsorglich überall die flachen Varianten einsetzt, handelt sich dafür Fehler ein, die schwer zu finden sind: Eine Änderung wird schlicht nicht bemerkt, und die Anzeige bleibt stehen.

12:40 Fangen Sie mit dem Einfachen an, messen Sie, und optimieren Sie gezielt. Diese Aufgabe ist eine Denkübung, und das Erfolgskriterium ist der eigentliche Kern: Es soll kein Wert mehr als eigener Zustand geführt werden, der sich aus anderen ableiten lässt. Das ist die häufigste Verschwendung in Vue-Code — eine Variable für die Anzahl, eine für die gefilterte Liste, eine für den Gültigkeitsstatus, und alle müssen von Hand nachgezogen werden.

13:05 Gehen Sie Ihre Komponente Wert für Wert durch und fragen Sie: Kann ich das ausrechnen? Wenn ja, gehört es in eine Ableitung. Der erste Punkt fasst die Aufgabe zusammen: Abgeleitete Werte als eigenen Zustand zu führen erzeugt zwei Wahrheiten. Der dritte Punkt ist eine wichtige Präzisierung: Der Schreibschutz schützt die Weitergabe, nicht das Original.

13:26 Wer also einen geschützten Wert nach außen gibt, kann ihn selbst weiterhin ändern — und das ist auch genau der Sinn. Der letzte Punkt ist noch einmal die Warnung vor verfrühter Optimierung, und ich wiederhole sie bewusst, weil es der häufigste Fehler in diesem Kapitel ist.

Lifecycle Hooks in der Composition API

13:41 Jetzt zum Lebenslauf einer Komponente. Sie entsteht, sie wird angezeigt, sie aktualisiert sich, irgendwann verschwindet sie wieder — und an jedem dieser Punkte können Sie sich einklinken. Das brauchen Sie öfter, als Sie denken: überall dort, wo Sie mit etwas außerhalb von Vue zu tun haben. Und dabei gilt genau eine Regel, die man kennen muss — eine Regel, deren Verletzung sich nicht als Fehler meldet, sondern als Code, der einfach nie läuft.

14:07 Genau deshalb sehen wir sie uns genau an. Ein Hook ist eine importierte Funktion, der Sie eine Rückruffunktion übergeben. Die Regel steht im letzten Satz und ist wichtiger als die Liste selbst: Die Registrierung muss synchron während des Setups erfolgen. Der Grund ist einfach — Vue merkt sich in diesem Moment, zu welcher Komponenteninstanz der Hook gehört.

14:29 Läuft die Registrierung später, etwa in einem Zeitgeber oder nach einer asynchronen Pause, fehlt dieser Bezug, und der Hook wird nie ausgeführt. Ohne Fehlermeldung, wohlgemerkt. Sieben Zeilen, aber ehrlich gesagt brauchen Sie im Alltag zwei bis drei davon. Der wichtigste ist der nach dem Einhängen — ab da existiert das DOM, und Sie dürfen zugreifen.

14:49 Der zweitwichtigste ist das Gegenstück beim Abbau, und zwar zum Aufräumen. Der Fehlerhook in der vorletzten Zeile wird selten verwendet und ist trotzdem wertvoll: Damit können Sie Fehler aus dem gesamten Teilbaum abfangen und eine Ersatzanzeige zeigen, statt die halbe Seite verschwinden zu lassen. Das ist das Standardmuster für alles, was Vue nicht selbst verwaltet: Beim Einhängen anmelden, beim Abbau abmelden.

15:13 Hier ein Fenster-Listener, aber dasselbe gilt für Zeitgeber, für Beobachter des Browsers und für offene Verbindungen. Der Fehler, den man macht, ist immer derselbe: Man schreibt die Anmeldung und vergisst das Gegenstück. Das fällt zunächst nicht auf. Erst wenn die Komponente hundertmal geöffnet und geschlossen wurde, hängen hundert Listener am Fenster und die Anwendung wird spürbar träge.

15:35 Der letzte Punkt ist der interessanteste, weil er eine Tür öffnet: Genau darauf beruht, dass Composables eigene Hooks mitbringen dürfen. Sie rufen im Setup eine Funktion auf, und die registriert intern ihren eigenen Aufräum-Hook — das funktioniert, weil der Aufruf synchron aus dem Setup heraus erfolgt. Vue weiß also weiterhin, zu welcher Instanz das gehört.

15:56 Das ist der Mechanismus, der Composables so mächtig macht: Sie bringen ihre eigene Lebenszyklusverwaltung mit, und die Komponente merkt davon nichts. Der erste Punkt ist der, der aus der Regel folgt und trotzdem regelmäßig passiert: Ein Hook nach einer asynchronen Pause registriert nichts. Kein Fehler, keine Warnung, der Code läuft einfach nie. Der letzte Punkt ist eine Falle für Neugierige: Der Aktualisierungs-Hook läuft nach jeder Aktualisierung.

16:23 Wenn Sie darin Zustand ändern, lösen Sie die nächste Aktualisierung aus — und haben eine Endlosschleife gebaut. Der Browser wird dann sehr still und sehr warm.

Strukturierung komplexer Logik in Vue-Anwendungen

16:33 Zum Abschluss des Moduls das Werkzeug, das die Composition API erst richtig auszahlt: Composables. Der Name klingt nach etwas Besonderem, dahinter steckt aber nur eine gewöhnliche Funktion. Und genau das ist der Punkt. Wir sehen uns an, wie man Logik aus einer zu groß gewordenen Komponente herauslöst und warum dieser Weg dem älteren Ansatz aus Vue 2 überlegen ist.

16:54 Dabei geht es weniger um Technik als um eine Frage der Lesbarkeit — und die entscheidet sich daran, ob man einer Zeile ansieht, woher ein Wert kommt. Ein Composable ist eine ganz normale JavaScript-Funktion, die Vue-Funktionen benutzt und reaktive Werte zurückgibt. Mehr ist es nicht. Es gibt kein besonderes Schlüsselwort, keine Registrierung, keine Basisklasse.

17:16 Die einzige Konvention ist der Name, der mit use beginnt — und das ist reine Lesbarkeit, es hat keine technische Bedeutung. Ich betone das, weil viele beim Wort Composable etwas Kompliziertes erwarten und dann erstaunt sind, wie unspektakulär die Sache ist. Sehen Sie sich die letzte Zeile an — dort steckt eine Regel, die wichtig ist: zurückgegeben wird ein gewöhnliches Objekt aus reaktiven Werten. Nicht ein reaktives Objekt.

17:42 Der Unterschied entscheidet darüber, ob der Aufrufer das Ergebnis zerlegen darf, ohne die Reaktivität zu verlieren — und zerlegen will man eigentlich immer. Ansonsten sieht die Funktion aus wie das Innere einer Komponente, und genau das ist sie ja auch: herausgelöste Komponentenlogik ohne das Template drumherum. Fünf Schritte, und Schritt zwei ist der eigentliche Test: Kommt der Block ohne Template aus? Wenn ja, ist er ein Kandidat.

18:08 Wenn er auf Markup zugreift oder Darstellung enthält, ist es vermutlich eher eine Kindkomponente. Der Hinweis unten ist mir wichtig, weil er dem Reflex widerspricht: Lohnen tut es sich wirklich erst, wenn derselbe Block zweimal gebraucht wird. Auslagern ist kein Selbstzweck — eine Anwendung mit dreißig winzigen Composables ist genauso schwer zu lesen wie eine mit drei riesigen Komponenten.

18:31 Der erste Punkt beschreibt das Kernproblem des älteren Ansatzes: Man sieht einer Eigenschaft nicht an, woher sie kommt. In einer Komponente mit drei solchen Erweiterungen steht plötzlich ein Wert zur Verfügung, und man muss alle drei Dateien durchsuchen. Bei einem Composable steht die Herkunft in der Zeile, in der Sie es aufrufen. Der zweite Punkt ist die Folge davon: Namenskollisionen.

18:53 Bei einem Composable benennen Sie beim Zerlegen einfach um — bei der älteren Variante ging das nicht. Die Aufgabe ist bewusst eng gefasst: Das Verhalten soll sich nicht ändern. Es geht um eine reine Umstrukturierung, und der Nachweis ist, dass die Oberfläche sich genauso verhält wie vorher. Der Hinweis unten nimmt Ihnen Druck: Wenn Sie den Block nur einmal brauchen, dürfen Sie ihn auch in der Komponente lassen.

19:18 Ich sage das, weil nach so einem Kapitel gern der Reflex einsetzt, alles auszulagern. Die Frage ist immer: Wird die Komponente dadurch verständlicher? Wenn nein, lassen Sie es. Der dritte Punkt ist der interessanteste und wird gelegentlich sogar absichtlich genutzt: Zustand außerhalb der Funktion zu deklarieren teilt ihn über alle Aufrufer.

19:39 Das ist dann faktisch ein globaler Zustand — manchmal genau das, was man will, meist aber ein Versehen mit überraschenden Folgen. Der zweite Punkt ist die Regel aus Kapitel sechs in neuem Gewand: Ein Composable, das Hooks registriert, muss synchron im Setup aufgerufen werden. In einem Klick-Handler funktioniert es nicht.

Reaktivität verstanden

19:57 Fassen wir zusammen. Die Composition API bündelt Logik nach Anliegen statt nach Optionsart, und ihre Stärke zeigt sich bei wachsenden Komponenten. Für den reaktiven Zustand gilt die Faustregel: Behälter für alles, Ableitung für alles Berechnete. Hooks werden synchron im Setup registriert, sonst laufen sie nie. Und Composables sind gewöhnliche Funktionen, mit denen Sie Logik teilen.

20:20 Im nächsten Modul verlassen wir die Logik und kümmern uns um das Aussehen — um Stile, die genau dort wirken, wo sie sollen.