Was ist Vue?

Vue (ausgesprochen /vjuː/, wie view im Englischen) ist ein JavaScript Framework zur Erstellung von Benutzeroberflächen.

Es basiert auf den Standards HTML, CSS und JavaScript und bietet ein deklaratives und Komponenten-orientiertes Programmier-Model zur effizienten UI-Entwicklung - von einfach bis komplex.

Beispiel

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

const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count is: {{ count }}
  </button>
</template>

Ergebnis:

Kernkonzepte

Das Beispiel demonstriert zwei Kern-Konzepte von Vue:

Deklaratives Rendern: Vue erweitert Standard-HTML um eine Template-Syntax, die uns erlaubt, deklarativ die HTML-Ausgabe zu beschreiben - basierend auf Daten (einem State) in JavaScript.
Reaktivität: Vue überwacht den State auf Änderungen und passt die DOM-Ausgabe entsprechend an.
Single-File-Components: HTML, Styles und der Komponenten-Code sind in einer Datei.

The Progressive Framework

Vue ist sowohl Framework als auch Ecosystem mit Unterstützung für die wichtigsten Anwendungsszenarien in der Web-Frontendentwicklung. Es ist dabei derart gestaltet, dass der Einsatz von Vue flexibel mit den Anforderungen gesteigert werden kann.

Mögliche Varianten des Einsatzes von Vue:

Enhancing static HTML without a build step
Embedding as Web Components on any page
Single-Page Application (SPA)
Fullstack / Server-Side-Rendering (SSR)
JAMStack / Static-Site-Generation (SSG)

Single-File Components

In den meisten Vue-Projekten mit Build-Tool Unterstützung werden die Komponenten in einem HTML-ähnlichen Format geschrieben - genannt Single-File Component (auch bekannt als *.vue Dateien, abgekürzt mit SFC). Eine Vue SFC kapselt die Komponenten-Logik (JavaScript), das Template (HTML), und die Styles (CSS) in einer einzelnen Datei.

SFC sind ein Vue auszeichnendes Feature und der empfohlene Weg Vue Komponenten zu schreiben - vorausgesetzt wir setzen ein Build-Tool Setup im Projekt ein!

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API Styles

Vue Komponenten können mit zwei unterschiedlichen Schnittstellen (API) programmiert werden:

Options API
Composition API

Options API

Mit der Options API definieren wir die Komponenten-Logik mit einem Objekt und Optionen. Properties dieser Optionen werden auf der Komponenten-Instanz bereitgestellt. Der this-Zeiger wird umgebogen auf diese.

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

Composition API

Mit der Composition API definieren wir die Komponenten-Logik mit importierten API Funktionen. In SFC wird die Composition API typischerweise benutzt mit einem Setup-Script (<script setup>). Das setup Attribut reduziert einiges an Boilerplate Code, der durch Code-Transformationen beim Build bereitgestellt wird.

<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`);
});
</script>

Welche API?

Zunächst gilt, dass beide API komplett gleichwertig sind. Die fundamentalen Vue-Konzepte liegen beiden zugrunde. Sie stellen einfach zwei unterschiedliche Schnittstellen auf die Kern-API dar. Tatsächlich wurde die Options API auf der Composition API implementiert.

Die Options API betont das Konzept einer Komponenten-Instanz (mit dem this-Zeiger auf diese) - was typischerweise besser mit einem klassen-basierten mentalen Modell korreliert. Zudem ist es durchaus etwas einsteiger-freundlicher, da einige Kern-Konzepte in der Options API elegant abstrahiert sind.

Die Composition API deklariert den reaktiven State direkt im Function-Scope und setzt diesen aus mehreren einzelnen Funktionen zusammen. Der Code ist flexibler (free-form) und verlangt nach vertieftem Wissen über die Reaktivität in Vue. Im Gegenzug belohnt uns diese Flexibilität mit mächtigeren Mustern bei der Organisation und Wiederverwendung von Logik.