Vue Academy · Lezione

ref e reactive: quando usare ciascuno

Accesso a ref.value, unwrap di reactive nei template, toRefs(), toRef() per il destructuring

ref e reactive: quando usare ciascuno è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Due strumenti per la reattività

Vue offre due metodi principali per creare uno stato reattivo: ref() e reactive(). Si sovrappongono in parte, ma ciascuno è più adatto a determinate situazioni. Sapere quale scegliere aiuta a mantenere pulito il codice.

ref funziona con qualsiasi valore

ref() può avvolgere qualsiasi cosa: un numero, una stringa, un valore booleano, un array o un oggetto. In JavaScript il valore si trova in .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref rimuove automaticamente il wrapper nei template

Sebbene in JavaScript sia necessario scrivere .value, il template rimuove automaticamente il wrapper da un ref di primo livello. Perciò {{ count }} funziona senza modifiche.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive è pensato per gli oggetti

reactive() accetta solo oggetti, inclusi array e Map. Restituisce un proxy profondamente reattivo e si accede direttamente alle proprietà: non serve .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive è profondamente reattivo

Anche gli oggetti e gli array annidati all’interno di un oggetto reactive sono reattivi. La modifica di una proprietà annidata attiva gli aggiornamenti senza ulteriore lavoro.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

Il limite di reactive: la destrutturazione interrompe la reattività

Se si destruttura un oggetto reactive, le variabili estratte diventano semplici valori e perdono la reattività. Questo è il problema più comune da tenere a mente.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

La soluzione: toRefs per una destrutturazione sicura

toRefs() converte ogni proprietà di un oggetto reattivo in un ref. Ora è possibile destrutturare l’oggetto mantenendo la reattività, perché ogni parte è un ref collegato alla fonte.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef per una singola proprietà

Se serve una sola proprietà come ref, si utilizzi toRef(state, 'key'). La proprietà rimane sincronizzata in entrambe le direzioni con l’oggetto di origine.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Una regola pratica

Utilizzi ref() per i primitivi (numeri, stringhe e valori booleani) e per i valori indipendenti.
Utilizzi reactive() per un gruppo di proprietà correlate che formano un unico oggetto.
Quando restituisce un oggetto reattivo da un composable, lo avvolga in toRefs().

ref può contenere anche oggetti

Non è obbligatorio scegliere reactive per gli oggetti. Anche un ref che contiene un oggetto è profondamente reattivo: è sufficiente accedervi tramite .value. Molti team utilizzano ref ovunque per mantenere la coerenza.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Tabella riepilogativa

ref: qualsiasi valore, richiede .value in JS, rimuove automaticamente il wrapper nel template e può essere riassegnato interamente.
reactive: solo oggetti, nessun .value, profondamente reattivo, ma perde la reattività con la destrutturazione e non può essere riassegnato.
toRefs: un ponte che rende destrutturabili le proprietà reattive.

Verifica rapida

Scelga lo strumento giusto.

Riepilogo

Punti chiave:

ref() avvolge qualsiasi valore e richiede .value in JavaScript.
reactive() è pensato per gli oggetti ed è profondamente reattivo, ma la destrutturazione ne interrompe la reattività.
toRefs() consente di destrutturare in sicurezza un oggetto reattivo.
Utilizzi ref per i primitivi e reactive per lo stato raggruppato in un oggetto.

Domande Frequenti

La lezione «ref e reactive: quando usare ciascuno» è gratuita?

Sì — il testo completo di «ref e reactive: quando usare ciascuno» è 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 «ref e reactive: quando usare ciascuno»?

Accesso a ref.value, unwrap di reactive nei template, toRefs(), toRef() per il destructuring 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 3 di 4.

Quanto tempo richiede la lezione «ref e reactive: quando usare ciascuno»?

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