Vue.js 3.2: Code sparen in Single File Components

Das beliebte JavaScript-Framework arbeitet daran, die Composition API ergonomischer zu gestalten, und führt dafür eine neue Syntax ein.

In Pocket speichern vorlesen Druckansicht 17 Kommentare lesen

(Bild: TimeShops/Shutterstock.com)

Lesezeit: 9 Min.
Von
  • Alexander von Studnitz
Inhaltsverzeichnis

Die kürzlich erschienene Version 3.2 "Quintessential Quintuplets" des JavaScript-Frameworks Vue.js bringt einige neue Features und Leistungssteigerungen mit sich. Eine interessante Neuerung ist die als Syntactic Sugar eingeführte neue Methode <script setup> in Single File Components (SFCs). Nach mehreren experimentellen Testläufen und reger Diskussion in den Requests for Comments (RFCs) über potenzielle Implementierungen gilt sie nun als stabil. <script setup> erweitert die seit Version 3 vorhandene Composition API und macht das Arbeiten mit ihr komfortabler. Durch die in der Composition API erschienende setup-Methode lassen sich nun auch komplexere Interaktionen mit dem Zustand einer Vue.js-Komponente abkapseln. In früheren Versionen wären dafür Mixins oder Renderless Components mit Scoped Slots notwendig gewesen.

Wer den Paketmanager npm mindestens in Version 7 installiert hat, kann Vue.js 3.2 direkt ausprobieren. Als Build-Tool dient hierbei das blitzschnelle Vite.js, das ebenfalls vom Vue.js-Hauptentwickler Evan You stammt. Vue ist mit folgendem Befehl sofort installiert:

npm init vite@latest vue-script-setup-app -- --template vue

Nach der Installation ist im Ordner vue-script-setup-app ein neues Vue.js-Projekt verfügbar, das Vite.js als Build-Tool nutzt. Es lässt sich wie folgt ausführen:

cd vue-script-setup-app
npm install
npm run dev

Das sollte einen Webserver starten, der sich mit folgender Nachricht meldet:

vite v2.5.10 dev server running at:

> Local: <http://localhost:3000/
> Network: use `--host` to expose

ready in 504ms.

Dort lässt sich interaktiv und mit Hot Reload an einem Vue.js-Projekt arbeiten.