Vue Academy · Lezione

Proprietà calcolate

Derivi valori reattivi memorizzati nella cache con le proprietà computed.

Proprietà calcolate è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Che cos'è una proprietà computed?

Una proprietà computed ricava un valore da altri dati reattivi.

Viene ricalcolata solo quando cambiano le sue dipendenze
Nei template si comporta come una normale proprietà
Mantiene puliti i template spostando la logica in JS

Definizione di una proprietà computed

Con la Composition API, utilizzi la funzione computed.

import { ref, computed } from "vue"

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

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

Utilizzo di una proprietà computed nel template

Si accede a una proprietà computed come a una proprietà data, senza parentesi.

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

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

Computed e metodi

Anche un metodo restituisce un valore: perché utilizzare allora una proprietà computed?

Una proprietà computed viene memorizzata nella cache in base alle dipendenze
Un metodo viene eseguito ogni volta che viene chiamato durante un render

Le proprietà computed sono più efficienti per i valori derivati utilizzati ripetutamente.

La memorizzazione nella cache in pratica

Una proprietà computed viene eseguita nuovamente solo quando cambia una dipendenza. Se la si legge più volte, il risultato memorizzato nella cache viene riutilizzato.

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

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

I metodi vengono eseguiti ogni volta

Al contrario, un metodo ricalcola il risultato a ogni chiamata, anche se i valori di input non sono cambiati.

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

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

computed nell'Options API

L'Options API dichiara le proprietà computed in un blocco computed.

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

Getter delle proprietà computed

Per impostazione predefinita, una proprietà computed è di sola lettura: dispone solo di un getter.

Il getter viene eseguito per produrre il valore ogni volta che cambiano le dipendenze.

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

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

Setter delle proprietà computed

È possibile rendere una proprietà computed scrivibile fornendo sia una funzione get sia una funzione set.

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

Utilizzo del setter

Quando si assegna un valore a una proprietà computed scrivibile, viene eseguito il relativo setter.

fullName.value = "Grace Hopper"

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

Quando utilizzare le proprietà computed

Utilizzi una proprietà computed quando serve un valore derivato dallo stato reattivo.

Filtrare o ordinare un elenco
Formattare i dati da visualizzare
Combinare più valori in uno solo

Utilizzi i watcher (nella prossima lezione) quando invece deve reagire con effetti collaterali.

Verifica rapida

Verifichi la propria comprensione delle proprietà computed.

Riepilogo: proprietà computed

Ha imparato a gestire lo stato derivato:

computed ricava valori dai dati reattivi
Il risultato viene memorizzato nella cache e ricalcolato solo quando cambiano le dipendenze
I metodi vengono eseguiti a ogni chiamata, mentre le proprietà computed no
Una proprietà computed può avere un getter e un setter facoltativo

Prossimo argomento: watcher e reattività profonda.

Domande Frequenti

La lezione «Proprietà calcolate» è gratuita?

Sì — il testo completo di «Proprietà calcolate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Proprietà calcolate»?

Derivi valori reattivi memorizzati nella cache con le proprietà computed. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Proprietà calcolate»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy