0Pricing
Frontend Academy · Lektion

computed() und watch()

Leiten Sie Werte mit computed() verzögert ab, reagieren Sie mit watch() und watchEffect() auf State-Änderungen und steuern Sie das Flush-Timing.

computed() und watch() ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

computed() in der Composition API

computed(fn) erstellt einen schreibgeschützten reaktiven Ref, der seinen Wert aus anderen reaktiven Quellen ableitet. Der Wert wird zwischengespeichert – der Getter wird nur ausgeführt, wenn sich Abhängigkeiten ändern.

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

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

Schreibbares computed()

Übergeben Sie ein Objekt mit get und set, um ein schreibbares computed zu erstellen. Der Setter verarbeitet Aktualisierungen und gibt die Änderung normalerweise an den Quell-Ref weiter.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

Grundlagen von watch()

watch(source, callback) führt den Callback aus, wenn sich die Quelle ändert. Der Callback erhält den neuen und den alten Wert.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

Einen Ref im Vergleich zu reactive beobachten

Beobachten Sie einen Ref direkt. Um eine reaktive Eigenschaft zu beobachten, verwenden Sie eine Getter-Funktion () => state.prop.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Tiefe Überwachung

Übergeben Sie { deep: true }, um verschachtelte Änderungen in einem Objekt-Ref zu beobachten.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Sofortige Überwachung

Übergeben Sie { immediate: true }, um den Callback sofort beim Setup und vor jeder Änderung auszuführen. Das ist nützlich, wenn Sie einen Seiteneffekt mit dem Anfangswert ausführen möchten.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn) führt den Callback sofort aus und wiederholt ihn, sobald sich eine darin verwendete reaktive Abhängigkeit ändert. Quellen müssen nicht explizit angegeben werden.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect im Vergleich zu watch

watchEffect: sofortige Ausführung, verfolgt Abhängigkeiten automatisch, kein Zugriff auf den alten Wert. watch: explizite Quellen, standardmäßig verzögert, Zugriff auf alte und neue Werte. Verwenden Sie watchEffect für deklarative Seiteneffekte und watch, wenn Sie steuern müssen, wann und wie oft der Code ausgeführt wird.

Watcher beenden

Sowohl watch als auch watchEffect geben eine Stop-Funktion zurück. Rufen Sie sie auf, um die Beobachtung zu beenden. In