Vue Academy · Lektion

Grundlæggende reaktivitet

Lær, hvordan Vue sporer reaktive afhængigheder

Lektion 1 af 313 trin

Grundlæggende reaktivitet er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 1 af 3. 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 3 lektioner i alt.

Hvad er reaktivitet?

Reaktivitet betyder, at Vue automatisk opdaterer DOM'en, når dine data ændres.

Du ændrer en værdi i JavaScript
Vue registrerer ændringen
Visningen gengives igen, så den stemmer overens

Der kræves ingen manuel manipulation af DOM'en.

Sådan sporer Vue afhængigheder

Vue bruger et system til afhængighedssporing.

Når en gengivelse læser en reaktiv værdi, registrerer Vue denne afhængighed
Når værdien senere ændres, ved Vue, hvilke gengivelser der skal køres igen
Det gør opdateringer præcise og effektive

ref til primitive værdier

I Composition API gør ref en enkelt værdi reaktiv.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref i skabeloner

I skabeloner bliver refs automatisk pakket ud, så du kan udelade .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive til objekter

reactive gør et helt objekt reaktivt. Du tilgår egenskaber direkte uden .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref eller reactive

Sådan vælger du mellem dem:

ref fungerer med alle værdier (primitive værdier og objekter) og tilgås med .value
reactive fungerer kun med objekter og tilgås direkte

Mange teams foretrækker ref overalt for at være konsekvente.

data-indstillingen (Vue 2 / Options API)

Options API bruger funktionen data. Alle returnerede egenskaber er reaktive.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Forbehold ved reaktivitet med arrays

Direkte tildeling til et arrayindeks kan være vanskelig, især i Vue 2.

I Vue 2 udløste arr[5] = x ikke opdateringer
Proxyer i Vue 3 håndterer de fleste tilfælde, men det er stadig en god idé at være forsigtig

Foretræk arraymetoder for at opnå tydelighed og sikkerhed.

Reaktive arraymetoder

Metoder, der ændrer data, som push, splice og pop, spores reaktivt.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Udskiftning eller ændring

Der er to måder at opdatere arrays på:

Ændr arrayet med push, splice eller sort
Udskift det ved at tildele et nyt array, f.eks. fra filter eller map

Begge dele udløser reaktivitet i Vue 3. Udskiftning er ofte renere for afledte lister.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Undgå tab af reaktivitet

Destrukturering af et reaktivt objekt afbryder reaktiviteten for de pågældende variabler.

Når du trækker en egenskab ud, kopieres dens aktuelle værdi
Brug toRefs for at bevare reaktiviteten ved destrukturering

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Hurtigt tjek

Test din forståelse af Vue-reaktivitet.

Besvar den i den interaktive lektion

Opsummering: Grundlæggende reaktivitet

Du har lært, hvordan Vues reaktivitet fungerer:

Vue sporer, hvilke data hver gengivelse bruger
ref gør værdier reaktive (brug .value i JS)
reactive gør objekter reaktive (direkte adgang)
Options API bruger funktionen data
Brug arraymetoder og toRefs for at undgå at miste reaktivitet

Næste emne: beregnede egenskaber.

Gratis at komme i gang

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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende reaktivitet” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Grundlæggende reaktivitet”, 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 3 lektioner i alt.

Hvad lærer jeg i “Grundlæggende reaktivitet”?

Lær, hvordan Vue sporer reaktive afhængigheder 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 1 af 3.

Hvor lang tid tager lektionen “Grundlæggende reaktivitet”?

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

← Tilbage til Vue Academy