Vue Academy · leksjon

Computed-egenskaper

Utled bufrede, reaktive verdier med computed-egenskaper.

Leksjon 2 av 313 trinn

Computed-egenskaper er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 2 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 computed-egenskap?

En computed-egenskap utleder en verdi fra andre reaktive data.

Den beregnes på nytt bare når avhengighetene endres
Den leses som en vanlig egenskap i maler
Den holder malene ryddige ved å flytte logikk til JS

Definere en computed

I Composition API bruker du computed-funksjonen.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Bruke en computed i malen

En computed brukes som en data-egenskap, uten parenteser.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

Computed eller metoder

En metode returnerer også en verdi, så hvorfor bruke computed?

Computed er bufret basert på avhengighetene
En metode kjøres hver gang den kalles under en gjengivelse

Computed er mer effektivt for avledede verdier som brukes flere ganger.

Bufring i praksis

En computed kjøres på nytt bare når en avhengighet endres. Hvis du leser den flere ganger, brukes det bufrede resultatet på nytt.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Metoder kjøres hver gang

Til sammenligning beregner en metode resultatet på nytt ved hvert kall, selv om inndataene ikke er endret.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed i Options API

Options API deklarerer computed-egenskaper i en computed-blokk.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Computed-gettere

Som standard er en computed skrivebeskyttet: den har bare en getter.

Getteren kjøres for å produsere verdien når avhengighetene endres.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Computed-settere

Du kan gjøre en computed skrivbar ved å angi både en get- og en set-funksjon.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Bruke setteren

Når du tilordner en verdi til en skrivbar computed, kjøres setteren.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Når bør du bruke computed?

Bruk computed når du trenger en verdi som er avledet fra reaktiv tilstand.

Filtrere eller sortere en liste
Formatere data for visning
Kombinere flere verdier til én

Bruk watchers (i neste leksjon) når du i stedet trenger å reagere med sideeffekter.

Hurtigsjekk

Test forståelsen din av computed-egenskaper.

Besvar den i den interaktive leksjonen

Oppsummering: Computed-egenskaper

Du har lært om avledet tilstand:

computed utleder verdier fra reaktive data
Den er bufret og beregnes bare på nytt når avhengighetene endres
Metoder kjøres ved hvert kall; computed gjør ikke det
Computed kan ha en getter og en valgfri setter

neste: watchers og dyp reaktivitet.

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 «Computed-egenskaper» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Computed-egenskaper», 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 «Computed-egenskaper»?

Utled bufrede, reaktive verdier med computed-egenskaper. 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 2 av 3.

Hvor lang tid tar leksjonen «Computed-egenskaper»?

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