JavaScript: Vue.js 3.2 stuft Syntactic Sugar als stabil ein

Für das JavaScript-Framework Vue.js liegt mit 3.2 eine neue Version vor. Sie trägt den Namen "Quintessential Quintuplets" und bringt einige neue, jedoch nicht mit der Abwärtskompatibilität brechende Features mit. Unter anderem gelten <script setup> und <style> v-bind ab sofort als stabil.

Vom Status experimentell zu stabil

Zwei Neuerungen für die Single File Components (SFCs), auch bekannt als .vue-Dateien, verlassen den experimentellen Status und gelten nun als stabil: <script setup> ist ein Syntactic Sugar zur Übersetzungszeit (Compile-time), der die Ergonomie bei der Nutzung der neuen Composition API innerhalb von SFCs deutlich verbessern soll. Unter "syntaktischer Zucker" versteht man die Erweiterung der Syntax einer Programmiersprache, um Schreibweisen zu vereinfachen. Der Begriff geht auf den britischen Informatiker Peter J. Landin zurück, der "syntactic sugar" in den 1960er Jahren prägte.

Auch als stabil ist ab sofort <style> v-bind anzusehen, was Komponentenstatus-getriebene dynamische CSS-Werte in SFC <style>-Tags ermöglicht. Der Ankündigungsbeitrag beinhaltet ein Beispiel, in dem die beiden neuen Features zum Einsatz kommen:

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

Web Components in Vue.js erstellen

Das Webframework führt mit Version 3.2 eine neue defineCustomElement-Methode zur Erstellung von nativen benutzerdefinierten Elementen unter Verwendung der Vue-Komponenten-APIs ein: Entwicklerinnen und Entwickler erhalten somit die Möglichkeit, Vue.js-basierte UI-Komponenten-Bibliotheken zu erstellen, die sich mit jedem oder keinem Framework verwenden lassen. Die Dokumentation bietet einen neuen Abschnitt über das Verwenden und Erstellen von Webkomponenten in Vue.js.

Lesen Sie auch

Vue.js 3: Reactivity System und Composition API unter der Lupe

Weitere Informationen zur neuen Minor Version des Webframeworks finden sich im Ankündigungsbeitrag auf dem Vue.js-Blog.

(mdo)