Wie Computed Properties und Watchers in Vue.js funktionieren

Das Reaktivitätssystem von Vue verfolgt automatisch Abhängigkeiten und aktualisiert Ihre Benutzeroberfläche, wenn sich Daten ändern. Aber zu wissen, wann man Vue 3 Computed Properties gegenüber Vue 3 Watchers verwenden sollte, kann den Unterschied zwischen sauberem, performantem Code und einem Wartungsalbtraum ausmachen. Lassen Sie uns untersuchen, wie diese Features funktionieren und wann jedes einzelne glänzt.

Die Grundlagen der Vue-Reaktivität verstehen

Das Reaktivitätssystem von Vue 3 verwendet Proxies, um zu verfolgen, wann auf Properties zugegriffen und wann sie modifiziert werden. Wenn sich reaktive Daten ändern, weiß Vue genau, welche Teile Ihrer Anwendung von diesen Daten abhängen, und aktualisiert sie effizient. Computed Properties und Watchers sind zwei leistungsstarke Tools, die auf dieser Grundlage aufbauen und jeweils unterschiedliche Zwecke in Ihrem reaktiven Workflow erfüllen.

Vue 3 Computed Properties: Deklarativ und gecacht

Computed Properties leiten neue reaktive Werte aus vorhandenen Daten ab. Sie sind deklarativ, gecacht und sollten immer reine Funktionen ohne Seiteneffekte sein.

Composition API Syntax

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

const price = ref(100)
const quantity = ref(2)

const total = computed(() => price.value * quantity.value)
const formattedTotal = computed(() => `$${total.value.toFixed(2)}`)
</script>

<template>
  <p>Total: {{ formattedTotal }}</p>
</template>

Options API Syntax

export default {
  data() {
    return {
      price: 100,
      quantity: 2
    }
  },
  computed: {
    total() {
      return this.price * this.quantity
    },
    formattedTotal() {
      return `$${this.total.toFixed(2)}`
    }
  }
}

Der entscheidende Vorteil? Caching. Vue berechnet eine Computed Property nur neu, wenn sich ihre Abhängigkeiten ändern. Wenn Sie formattedTotal mehrmals in Ihrem Template referenzieren, wird die Berechnung einmal pro Update-Zyklus ausgeführt, nicht bei jedem Zugriff.

Schreibbare Computed Properties

Gelegentlich benötigen Sie eine Computed Property mit sowohl Getter als auch Setter:

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

Vue 3 Watchers: Imperative Seiteneffekte

Watchers beobachten reaktive Werte und führen Seiteneffekte aus, wenn sie sich ändern. Im Gegensatz zu Computed Properties sind Watchers imperativ und perfekt für asynchrone Operationen, API-Aufrufe oder DOM-Manipulationen.

Grundlegende Watch-Syntax

// Composition API
import { ref, watch } from 'vue'

const searchQuery = ref('')
const results = ref([])

watch(searchQuery, async (newQuery) => {
  if (newQuery.length > 2) {
    results.value = await fetchSearchResults(newQuery)
  }
})

watchEffect für automatisches Tracking

watchEffect verfolgt Abhängigkeiten automatisch, ohne sie explizit zu deklarieren:

import { ref, watchEffect } from 'vue'

const searchQuery = ref('')
const results = ref([])

watchEffect(async () => {
  // Verfolgt automatisch searchQuery.value
  if (searchQuery.value.length > 2) {
    results.value = await fetchSearchResults(searchQuery.value)
  }
})

Erweiterte Watcher-Optionen

watch(source, callback, {
  immediate: true,  // Sofort bei Erstellung ausführen
  deep: true,       // Verschachtelte Properties beobachten
  flush: 'post'     // Nach DOM-Updates ausführen
})

Computed vs. Watch: Die richtige Wahl treffen

Hier erfahren Sie, wann Sie welchen Ansatz verwenden sollten:

Verwenden Sie Computed Properties, wenn:

• Sie neue Werte aus vorhandenen reaktiven Daten ableiten
• Sie das Ergebnis in Ihrem Template benötigen
• Die Operation synchron und rein ist
• Sie automatisches Caching wünschen

Verwenden Sie Watchers, wenn:

• Sie Seiteneffekte ausführen (API-Aufrufe, Logging, localStorage)
• Sie auf Datenänderungen mit imperativer Logik reagieren
• Sie asynchrone Operationen handhaben
• Sie Zugriff auf alte und neue Werte benötigen

Praktischer Vergleich

// ❌ Falsch: Seiteneffekt in Computed
const searchResults = computed(async () => {
  const response = await fetch(`/api/search?q=${query.value}`)
  return response.json() // Funktioniert nicht - Computed muss synchron sein
})

// ✅ Richtig: Watcher für Seiteneffekte
watch(query, async (newQuery) => {
  const response = await fetch(`/api/search?q=${newQuery}`)
  searchResults.value = await response.json()
})

// ✅ Richtig: Computed für reine Ableitung
const filteredResults = computed(() => 
  searchResults.value.filter(item => item.active)
)

Performance-Überlegungen

Computed Properties zeichnen sich durch Caching in puncto Performance aus. Sie werden nur neu berechnet, wenn sich Abhängigkeiten ändern, was sie ideal für aufwändige Operationen macht:

// Dies wird nur neu berechnet, wenn sich items oder filterText ändern
const expensiveFilter = computed(() => {
  console.log('Filtering...') // Wird nur bei Abhängigkeitsänderung ausgeführt
  return items.value.filter(item => 
    complexFilterLogic(item, filterText.value)
  )
})

Watchers hingegen werden immer ausgeführt, wenn sie ausgelöst werden. Verwenden Sie sie mit Bedacht, insbesondere mit deep: true bei großen Objekten.

Fazit

Vue 3 Computed Properties und Watchers bleiben grundlegend für das Reaktivitätssystem von Vue. Merken Sie sich die einfache Regel: Verwenden Sie Computed für reine, gecachte Ableitungen und Watchers für Seiteneffekte. Computed Properties halten Ihre Templates durch automatisches Caching sauber und performant, während Watchers die imperativen, asynchronen Operationen handhaben, die Computed Properties nicht können. Beherrschen Sie beide, und Sie werden Vue-Anwendungen schreiben, die sowohl elegant als auch effizient sind.

Häufig gestellte Fragen (FAQs)

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.