PricingLoginStart free
Frontend Academy · Lektion

computed() og watch()

Afled værdier lazy med computed(), reagér på state-ændringer med watch() og watchEffect(), og styr flush-timing.

Lektion 2 af 413 trin

computed() og watch() er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

computed() i Composition API

computed(fn) opretter en skrivebeskyttet, reaktiv ref, der afleder sin værdi fra andre reaktive kilder. Den er cachelagret — getteren kører kun, når afhængighederne ændres.

<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>

Skrivbar computed()

Overfør et objekt med get og set for at oprette en skrivbar computed-egenskab. Setteren håndterer opdateringer og afspejler typisk ændringen tilbage i kilde-ref'en.

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

Grundlæggende om watch()

watch(source, callback) kører callbacken, når kilden ændres. Callbacken modtager de nye og gamle værdier.

import { ref, watch } from 'vue';

const query = ref('');

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

Overvågning af ref kontra reactive

Overvåg en ref direkte. Hvis du vil overvåge en reaktiv egenskab, skal du bruge en 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));

Dyb overvågning

Overfør { deep: true } for at overvåge indlejrede ændringer i en objekt-ref.

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

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

Øjeblikkelig overvågning

Overfør { immediate: true } for at køre callbacken straks under opsætningen, før der sker ændringer. Det er nyttigt, når du vil udføre en sideeffekt med startværdien.

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

watchEffect()

watchEffect(fn) kører callbacken straks og kører den igen, når en reaktiv afhængighed, der bruges i den, ændres. Du behøver ikke angive kilder eksplicit.

import { watchEffect } from 'vue';

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

watchEffect kontra watch

watchEffect: straks, sporer automatisk afhængigheder og har ikke adgang til den gamle værdi. watch: eksplicitte kilder, doven som standard og adgang til gamle og nye værdier. Brug watchEffect til deklarative sideeffekter og watch, når du har brug for kontrol over, hvornår og hvor ofte den kører.

Stop af overvågere

Både watch og watchEffect returnerer en stopfunktion. Kald den for at stoppe overvågningen. I