Hello Vue 3.0!

Die Composition API ist eines der spannendsten Features von Vue 3. Sie ermöglicht es, Komponenten-Logik flexibel zu organisieren und wiederverwendbar zu gestalten.

Warum Composition API?

Mit der Options API organisieren wir Code nach Optionen (data, methods, computed). Das funktioniert gut bei kleineren Komponenten, kann aber bei komplexeren Komponenten unübersichtlich werden.

Die Composition API erlaubt es uns, Code nach Funktionalität zu gruppieren - verwandte Logik bleibt zusammen.

Die Basics

reactive() und ref()

import { ref, reactive } from 'vue'

// ref für primitive Werte
const count = ref(0)
console.log(count.value) // 0

// reactive für Objekte
const state = reactive({
  user: null,
  isLoading: false
})
console.log(state.isLoading) // false

computed()

Berechnete Werte sind reaktiv und werden automatisch aktualisiert:

import { ref, computed } from 'vue'

const firstName = ref('Max')
const lastName = ref('Mustermann')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

watch() und watchEffect()

Für Seiteneffekte bei Änderungen:

import { ref, watch, watchEffect } from 'vue'

const searchQuery = ref('')

// Explizites Watching
watch(searchQuery, (newValue, oldValue) => {
  console.log(`Suche: ${newValue}`)
})

// Automatisches Dependency-Tracking
watchEffect(() => {
  console.log(`Aktuelle Suche: ${searchQuery.value}`)
})

Composables: Wiederverwendbare Logik

Das Killer-Feature der Composition API sind Composables - wiederverwendbare Funktionen, die reaktiven State kapseln.

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return { count, increment, decrement }
}

Verwendung in einer Komponente:

<script setup>
import { useCounter } from './useCounter'

const { count, increment, decrement } = useCounter(10)
</script>

<template>
  <button @click="decrement">-</button>
  <span>{{ count }}</span>
  <button @click="increment">+</button>
</template>

Fazit

Die Composition API ist kein Ersatz für die Options API, sondern eine Ergänzung. Für komplexe Komponenten und wiederverwendbare Logik bietet sie deutliche Vorteile.

Wir bei hilarion5 haben bereits alle unsere Projekte auf Vue 3 migriert und sind begeistert. Starte neue Vue 3 Projekte mit <script setup> und der Composition API - es lohnt sich!