Computed og watch i Composition API
computed() for avledet tilstand samt watch() og watchEffect() for bivirkninger.
Computed og watch i Composition API er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Avlede verdier og reagere på tilstand
Reaktiv tilstand er bare halve bildet. Du må også avlede nye verdier fra den og reagere på endringer. Composition API tilbyr computed, watch og watchEffect for dette.
computed for avledede verdier
computed() tar en getter-funksjon og returnerer en ref der verdien er avledet fra annen reaktiv tilstand. Du får tilgang til den med .value i JS, og den pakkes automatisk ut i malen.
import { ref, computed } from 'vue'
const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4computed kjøres ved behov og bufres
En computed beregnes på nytt bare når en av de reaktive avhengighetene endres. Hvis du leser den ti ganger uten endringer, kjøres getter-funksjonen én gang, og det bufrede resultatet brukes på nytt.
Dette gjør computed ideell for kostbare beregninger.
computed oppdateres automatisk
Endre en avhengighet, så oppdateres computed neste gang den leses. Du kaller den aldri manuelt.
const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10watch for bivirkninger
watch() overvåker en reaktiv kilde og kjører en callback når den endres. Callback-en mottar den nye verdien og den gamle verdien.
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('changed from', oldVal, 'to', newVal)
})watch kjøres ved behov som standard
I motsetning til computed kjører ikke watch callback-en umiddelbart. Den venter på den første endringen. Bruk den til bivirkninger: logging, henting av data og lagring.
Overvåke flere kilder
Send en array med kilder til watch for å overvåke flere verdier samtidig. Callback-en mottar arrayer med nye og gamle verdier.
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, newName)
})Overvåke en getter
For å overvåke en egenskap i et reaktivt objekt sender du inn en getter-funksjon. Hvis du overvåker objektet direkte, utløses callback-en bare ved dype endringer, noe som kan være overraskende.
const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
console.log('count is', newVal)
})watchEffect: Umiddelbar kjøring og automatisk sporing
watchEffect() kjører funksjonen umiddelbart og på nytt hver gang en reaktiv verdi som brukes inni den, endres. Du trenger ikke liste opp avhengigheter — de spores automatisk.
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log('count is', count.value)
})
// logs immediately, then on every changewatch sammenlignet med watchEffect
watch: eksplisitt kilde, kjøres ved behov, gir deg gamle og nye verdier.watchEffect: sporer avhengigheter automatisk, kjøres umiddelbart, gir ingen tilgang til den gamle verdien.
Bruk watch når du trenger den forrige verdien eller ønsker presis kontroll. Bruk watchEffect for raske reaktive bivirkninger.
computed kontra watch
Bruk computed når du vil ha en ny avledet verdi. Bruk watch eller watchEffect når du vil utføre en handling som svar på en endring. Ikke bruk watch til å beregne en verdi på nytt – det er det computed er til for.
Hurtigsjekk
Velg riktig reaktiv hjelpefunksjon.
Oppsummering
Nå vet du hvordan du kan avlede verdier og reagere på endringer:
computedoppretter avledede verdier som evalueres ved behov og bufres.watchreagerer på en bestemt kilde og gir nye og gamle verdier; den evalueres ved behov.watchEffectkjører umiddelbart og sporer avhengigheter automatisk.- Bruk computed for verdier og watch/watchEffect for bivirkninger.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Computed og watch i Composition API» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Computed og watch i Composition API», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Computed og watch i Composition API»?
computed() for avledet tilstand samt watch() og watchEffect() for bivirkninger. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Computed og watch i Composition API»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Hvorfor Composition API?
- setup()-funksjonen og reaktive variabler
- ref kontra reactive: Når bør De bruke hva?
- Computed og watch i Composition API