Vue Academy · Lezione

Computed e watch nella Composition API

computed() per lo stato derivato, watch() e watchEffect() per gli effetti collaterali

Computed e watch nella Composition API è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. 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 4 lezioni in totale.

Derivare dallo stato e reagire ai cambiamenti

Lo stato reattivo è solo metà del quadro. È anche necessario derivare nuovi valori da esso e reagire ai cambiamenti. A questo scopo, la Composition API offre computed, watch e watchEffect.

computed per i valori derivati

computed() accetta una funzione getter e restituisce un ref il cui valore deriva da altro stato reattivo. In JS vi si accede con .value, mentre nel template viene rimosso automaticamente il wrapper.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed è lazy e memorizzato nella cache

Un computed viene ricalcolato solo quando cambia una delle sue dipendenze reattive. Se lo si legge dieci volte senza modifiche, il getter viene eseguito una sola volta e il risultato memorizzato nella cache viene riutilizzato.

Questo rende computed ideale per le derivazioni costose.

computed si aggiorna automaticamente

Si modifichi una dipendenza e il computed si aggiornerà alla successiva lettura. Non è mai necessario chiamarlo manualmente.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch per gli effetti collaterali

watch() osserva una fonte reattiva ed esegue una callback quando questa cambia. La callback riceve il nuovo valore e il vecchio valore.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch è lazy per impostazione predefinita

A differenza di computed, watch non esegue immediatamente la callback. Attende il primo cambiamento. Lo si utilizza per gli effetti collaterali: registrare informazioni, recuperare dati e salvare nello storage.

Osservare più fonti

Si passi un array di fonti a watch per osservare più valori contemporaneamente. La callback riceve array di valori nuovi e vecchi.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Osservare un getter

Per osservare una proprietà di un oggetto reattivo, si passi una funzione getter. Osservare direttamente l’oggetto si attiva solo in caso di modifiche profonde, il che può risultare sorprendente.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: esecuzione immediata e rilevamento automatico

watchEffect() esegue immediatamente la propria funzione e la esegue di nuovo ogni volta che cambia un valore reattivo utilizzato al suo interno. Non è necessario elencare le dipendenze: vengono rilevate automaticamente.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch e watchEffect a confronto

watch: fonte esplicita, esecuzione lazy, fornisce i valori vecchio e nuovo.
watchEffect: rileva automaticamente le dipendenze, viene eseguito immediatamente e non consente di accedere al valore precedente.

Utilizzi watch quando serve il valore precedente o si desidera un controllo preciso. Utilizzi watchEffect per effetti collaterali reattivi semplici e rapidi.

computed o watch

Ricorra a computed quando desidera ottenere un nuovo valore derivato. Ricorra a watch o watchEffect quando desidera eseguire un'azione in risposta a una modifica. Non usi watch per ricalcolare un valore: questo è lo scopo di computed.

Verifica rapida

Scelga l'helper reattivo corretto.

Riepilogo

Ora sa come derivare valori e reagire alle modifiche:

computed crea valori derivati lazy e memorizzati nella cache.
watch reagisce a una sorgente specifica e fornisce i valori nuovo e precedente; è lazy.
watchEffect viene eseguito immediatamente e tiene traccia automaticamente delle dipendenze.
Usi computed per i valori e watch/watchEffect per gli effetti collaterali.

Domande Frequenti

La lezione «Computed e watch nella Composition API» è gratuita?

Sì — il testo completo di «Computed e watch nella Composition API» è 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 4 lezioni in totale.

Cosa imparerò in «Computed e watch nella Composition API»?

computed() per lo stato derivato, watch() e watchEffect() per gli effetti collaterali 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 4 di 4.

Quanto tempo richiede la lezione «Computed e watch nella Composition API»?

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