Vue Academy · leksjon

Watchers og dyp reaktivitet

Reager på dataendringer med watchers og dyp overvåking.

Leksjon 3 av 313 trinn

Watchers og dyp reaktivitet er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 3. 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 3 leksjoner.

Hva er en watcher?

En watcher kjører en funksjon som svar på en dataendring.

I motsetning til computed brukes den til sideeffekter
Hente data, logge og lagre i lagring
Reagere når noe spesifikt endres

watch-funksjonen

watch-funksjonen tar imot en kilde som skal overvåkes, og en callback som mottar nye og gamle verdier.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

Et praktisk eksempel

Overvåke et søkefelt for å utløse et API-kall når innholdet endres.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

Alternativet immediate

Som standard utløses en watcher bare ved endringer. Alternativet immediate kjører den også én gang med en gang.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

Alternativet deep

Overvåking av et objekt utløses som standard bare når referansen endres. Alternativet deep overvåker også nestede egenskaper.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

Overvåke nestede objekter

Uten deep kan en endring i en nestet egenskap i et overvåket reaktivt objekt føre til at callbacken ikke utløses som forventet. deep sørger for at den gjør det, men krever mer arbeid.

Bruk deep bare når De faktisk trenger sporing av nestede egenskaper
Dyp overvåking av store objekter kan være ressurskrevende

Overvåke en getter

Hvis De vil overvåke en bestemt nestet verdi, sender De en getter-funksjon som kilde.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

Overvåke flere kilder

Send inn en array med kilder for å overvåke flere verdier samtidig.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect kjører umiddelbart på nytt hver gang en reaktiv verdi den leser, endres. Det er ikke nødvendig å angi en eksplisitt kildeliste.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch kontra watchEffect

Slik velger De mellom dem:

watch har en eksplisitt kilde, gir gamle og nye verdier og er lat som standard
watchEffect sporer avhengigheter automatisk, kjører umiddelbart og har ingen gammel verdi

Bruk watch når De trenger den forrige verdien eller presis kontroll, og watchEffect når De ønsker enkelhet.

Watchere i Options API

Options API deklarerer watchere i en watch-blokk med datanavnet som nøkkel.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

Kort kontroll

Test forståelsen Deres av watchere.

Besvar den i den interaktive leksjonen

Oppsummering: watchere og dyp reaktivitet

De har lært å reagere på endringer med sideeffekter:

watch overvåker en kilde og gir nye og gamle verdier
immediate kjører den én gang ved oppstart
deep sporer endringer i nestede objekter
watchEffect sporer avhengigheter automatisk og kjører umiddelbart
Overvåk flere kilder med en array

Deretter: ruting med Vue Router.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Watchers og dyp reaktivitet» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Watchers og dyp reaktivitet», 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 3 leksjoner.

Hva lærer jeg i «Watchers og dyp reaktivitet»?

Reager på dataendringer med watchers og dyp overvåking. 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 3 av 3.

Hvor lang tid tar leksjonen «Watchers og dyp reaktivitet»?

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

← Tilbake til Vue Academy