Was ist die Composition API von Vuejs?
Die Composition API ist eine Sammlung von APIs um anstatt deklarierte Optionen, importierte Funktionen zu nutzen.
Diese APIs unterliegen der Composition API:
Reactivity API, zB ref() und reactive(), um direkt reactive, computed states und watchers zu erstellen.
Lifecycle Hooks, zB onMounted() und onUpdated(), um auf den Lebenszyklus der Komponente zuzugreifen.
Depency Injection, provide() und injection(), dient dazu in das Abhängigkeitsinjektion System zu nutzen waehrend man die Reactivity API nutzt.
Die Composition API ist standardmaessig in 3. Version von VueJS drin. Fuer VueJS 2 muss das Plugin @vue/composition-api heruntergeladen werden
Warum wurde die Composition API kreiert?
Grosse Projekte bzw Komponente in der Options API sind schwer leserlich, weil zusammenhaengende Funktionalitaeten in verschiedenen Optionen (data, watch, computed, methods etc) ueber das gesamte Objekt verteilt werden. Diese Fragmentierung fuehrt dazu, dass Code schwer zu lesen ist, und demnach auch schwer zu warten ist.
Mit der Composition API sollte dies verbessert werden, da logisch zusammenhaengede Code Abschnitte gebuendelt an einer Stelle sitzen.
Weitere Vorteile dadurch sind auch die einfachere Integration von TS Syntaxen und das Exportieren der Funktionen fuer andere Komponente. Weil nicht mehr das gesamte Objekt genutzt wird entfaellt auch this.
Vorteile
Saubere und effizienterere wiederverwendbare Logik: Keine Nachteile der mixins Loesung mehr.
Einfacheres Handling vom Code: Code Abschnitte werden nicht mehr fragmentiert, Funktionen koennen in mehreren Komponenten wiederverwendet werden. Ordnung durch kompaktere und abgetrennte Abschnitte. Dadurch wird die Wartung und das Verstaendnis leichter gemacht.
Bessere Typescript Integration und Nutzung von Types.
Kleinerer Production Code. Minimierung von Code ist einfacher, weil kompiliert Code direkt auf die Variabeln in <script setup> zugreifen kann (this entfaellt, demnach wird auch keine Instanz Proxy erstellt) Dies fuehrt auch dazu, dass alle Variabeln Namen sicher gekuerzt werden koennen.
