Vue Academy · Les

Computed properties

Leid gecachte reactieve waarden af met computed properties.

Les 2 van 313 stappen

Computed properties is een gratis Vue Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 3 lessen.

Wat is een berekende eigenschap?

Een berekende eigenschap leidt een waarde af uit andere reactieve gegevens.

De waarde wordt alleen opnieuw berekend wanneer de afhankelijkheden veranderen
In sjablonen gedraagt de waarde zich als een normale eigenschap
Zo blijft de logica uit de sjablonen en staat die in JS

Een computed definiëren

Gebruik in de Composition API de functie computed.

import { ref, computed } from "vue"

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

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

Een computed in het sjabloon gebruiken

Je benadert een computed als een data-eigenschap, zonder haakjes.

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

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

Computed versus methoden

Een methode geeft ook een waarde terug, dus waarom zou je computed gebruiken?

Computed wordt op basis van afhankelijkheden gecached
Een methode wordt bij elke aanroep tijdens een weergave uitgevoerd

Computed is efficiënter voor afgeleide waarden die herhaaldelijk worden gebruikt.

Caching in de praktijk

Een computed wordt alleen opnieuw uitgevoerd wanneer een afhankelijkheid verandert. Als je de waarde meerdere keren leest, wordt het resultaat uit de cache hergebruikt.

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

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

Methoden worden elke keer uitgevoerd

Een methode wordt daarentegen bij elke aanroep opnieuw berekend, zelfs als de invoer niet is veranderd.

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

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

computed in de Options API

De Options API declareert berekende eigenschappen in een blok computed.

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

Computed-getters

Een computed is standaard alleen-lezen: de waarde heeft alleen een getter.

De getter wordt uitgevoerd om de waarde te produceren wanneer afhankelijkheden veranderen.

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

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

Computed-setters

Je kunt een computed beschrijfbaar maken door zowel een get- als een set-functie op te geven.

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

De setter gebruiken

Wanneer je een beschrijfbare computed een waarde toewijst, wordt de setter uitgevoerd.

fullName.value = "Grace Hopper"

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

Wanneer je computed gebruikt

Gebruik computed wanneer je een waarde nodig hebt die is afgeleid van een reactieve toestand.

Een lijst filteren of sorteren
Gegevens voor weergave opmaken
Meerdere waarden combineren tot één waarde

Gebruik watchers (in de volgende les) wanneer je in plaats daarvan op neveneffecten wilt reageren.

Korte toets

Toets je begrip van berekende eigenschappen.

Beantwoord dit in de interactieve les

Samenvatting: berekende eigenschappen

Je hebt geleerd over afgeleide toestand:

computed leidt waarden af uit reactieve gegevens
De waarde wordt gecached en alleen opnieuw berekend wanneer afhankelijkheden veranderen
Methoden worden bij elke aanroep uitgevoerd; computed niet
Computed kan een getter en een optionele setter hebben

Volgende onderwerp: watchers en diepe reactiviteit.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Computed properties” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Computed properties”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 3 lessen.

Wat leer ik in “Computed properties”?

Leid gecachte reactieve waarden af met computed properties. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.

Hoe lang duurt de les “Computed properties”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy