Computed og watch i Composition API
computed() til derived state, watch() og watchEffect() til side effects.
Computed og watch i Composition API er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Afled og reagér på tilstand
Reaktiv tilstand er kun den ene halvdel. Du skal også aflede nye værdier fra den og reagere på ændringer. Composition API tilbyder computed, watch og watchEffect til dette.
computed til afledte værdier
computed() tager en getter-funktion og returnerer en ref, hvis værdi er afledt af anden reaktiv tilstand. Tilgå den med .value i JS; i skabelonen pakkes den automatisk ud.
import { ref, computed } from 'vue'
const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4computed evalueres efter behov og cachelagres
En computed beregnes kun igen, når en af dens reaktive afhængigheder ændrer sig. Hvis du læser den ti gange uden ændringer, kører getter-funktionen én gang, og det cachelagrede resultat genbruges.
Det gør computed ideel til beregninger, der kræver mange ressourcer.
computed opdateres automatisk
Ændr en afhængighed, så opdateres computed, næste gang den læses. Du kalder den aldrig manuelt.
const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10watch til sideeffekter
watch() overvåger en reaktiv kilde og kører en tilbagekaldsfunktion, når den ændrer sig. Tilbagekaldsfunktionen modtager den nye værdi og den gamle værdi.
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('changed from', oldVal, 'to', newVal)
})watch evalueres først ved behov som standard
I modsætning til computed kører watch ikke sin tilbagekaldsfunktion med det samme. Den venter på den første ændring. Brug den til sideeffekter: logning, hentning af data og lagring.
Overvågning af flere kilder
Send et array af kilder for at overvåge flere værdier på én gang. Tilbagekaldsfunktionen modtager arrays med nye og gamle værdier.
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, newName)
})Overvågning af en getter
Hvis du vil overvåge en egenskab i et reaktivt objekt, skal du sende en getter-funktion. Hvis du overvåger objektet direkte, udløses tilbagekaldet kun ved dybe ændringer, hvilket kan være overraskende.
const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
console.log('count is', newVal)
})watchEffect: Kører straks og sporer automatisk
watchEffect() kører sin funktion med det samme og kører den igen, hver gang en reaktiv værdi, der bruges i funktionen, ændrer sig. Du angiver ikke afhængigheder — 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 kontra watchEffect
watch: eksplicit kilde, kører først ved ændringer og giver dig gamle og nye værdier.watchEffect: sporer afhængigheder automatisk, kører straks og giver ikke adgang til den gamle værdi.
Brug watch, når du har brug for den tidligere værdi eller ønsker præcis kontrol. Brug watchEffect til hurtige reaktive sideeffekter.
computed kontra watch
Vælg computed, når du vil have en ny afledt værdi. Vælg watch eller watchEffect, når du vil udføre en handling som reaktion på en ændring. Brug ikke watch til at genberegne en værdi – det er det, computed er til.
Hurtigt tjek
Vælg den rigtige reaktive hjælpefunktion.
Opsummering
Du ved nu, hvordan du afleder værdier og reagerer på ændringer:
computedopretter afledte værdier, som beregnes efter behov og cachelagres.watchreagerer på en bestemt kilde og giver nye og gamle værdier; den evalueres først ved ændringer.watchEffectkører med det samme og registrerer automatisk afhængigheder.- Brug computed til værdier og watch/watchEffect til sideeffekter.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Computed og watch i Composition API” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Computed og watch i Composition API”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Computed og watch i Composition API”?
computed() til derived state, watch() og watchEffect() til side effects. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Computed og watch i Composition API”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hvorfor Composition API?
- setup()-funktionen og reaktive variabler
- ref kontra reactive: Hvornår skal De bruge hvad?
- Computed og watch i Composition API