ref() e reactive()
Creare primitivi reattivi con ref(), racchiudere gli oggetti con reactive() e comprendere quando usare ciascuno dei due e come accedere ai valori di ref tramite .value.
ref() e reactive() è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Reattività in Vue 3
La Composition API di Vue 3 utilizza primitive reattive per tenere traccia dello stato. Due funzioni fondamentali sono ref() per i valori primitivi e reactive() per gli oggetti. Le modifiche a questi valori aggiornano automaticamente l'interfaccia.
ref() per i valori primitivi
ref(value) racchiude un valore in un contenitore reattivo. Acceda al valore e lo modifichi tramite .value nello script. Nei template, Vue rimuove automaticamente l'involucro delle ref: non è necessario usare .value.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>reactive() per gli oggetti
reactive(object) restituisce un proxy profondamente reattivo dell'oggetto. Acceda direttamente alle proprietà: non è necessario usare .value in alcun punto.
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: '',
password: '',
rememberMe: false
});
// Mutate directly:
form.email = 'user@example.com';
</script>
<template>
<input v-model="form.email">
</template>ref o reactive — Quando utilizzare ciascuno
Utilizzi ref() per: valori primitivi (stringhe, numeri, booleani), valori nullable e valori restituiti dai composable, che sono più facili da destrutturare. Utilizzi reactive() per: dati correlati che appartengono allo stesso oggetto.
Insidia della destrutturazione di reactive()
La destrutturazione di un oggetto reattivo fa perdere la reattività, perché le proprietà estratte sono valori normali e non ref reattive.
const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking
// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;toRef e toRefs
toRef(obj, 'key') crea una ref collegata a una proprietà. toRefs(obj) converte tutte le proprietà di un oggetto reattivo in singole ref collegate, che è quindi sicuro destrutturare.
import { toRefs } from 'vue';
const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'ref() per gli elementi DOM
Utilizzi ref(null) insieme a un attributo ref corrispondente nel template per ottenere un riferimento reattivo a un elemento DOM o all'istanza di un componente figlio.
<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref<HTMLInputElement | null>(null);
onMounted(() => {
inputEl.value?.focus(); // now the DOM element is available
});
</script>
<template>
<input ref="inputEl" type="text">
</template>isRef e unref
isRef(val) verifica se un valore è una ref. unref(val) rimuove l'involucro di una ref oppure restituisce il valore così com'è se non è una ref. È utile nei composable che accettano sia ref sia valori normali.
import { isRef, unref } from 'vue';
function double(val: Ref<number> | number) {
return unref(val) * 2; // works with both ref and plain number
}shallowRef e shallowReactive
shallowRef() è reattiva solo al livello superiore, non in profondità. shallowReactive() funziona allo stesso modo per gli oggetti. Le utilizzi per ottimizzare le prestazioni quando non è necessaria la reattività profonda, ad esempio con strutture di dati immutabili di grandi dimensioni.
Modificare o sostituire con reactive()
Con reactive(), modifichi direttamente le proprietà. Non può sostituire l'intero oggetto: reactive() richiede lo stesso riferimento. Per sostituire l'oggetto, utilizzi ref(), che consente di assegnare ref.value = newObject.
const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem]; // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassignReattività profonda
reactive() è profondamente reattiva per impostazione predefinita: Vue tiene traccia delle modifiche agli oggetti e agli array annidati. È comoda, ma può essere costosa per oggetti molto grandi. Valuti shallowReactive nei casi in cui le prestazioni siano critiche.
Verifica rapida
Perché la destrutturazione di un oggetto reactive() fa perdere la reattività?
Riepilogo: ref() e reactive()
ref() racchiude i valori primitivi; nello script si accede al valore tramite .value, che viene rimosso automaticamente nei template. reactive() rende gli oggetti profondamente reattivi; modifichi direttamente le proprietà. La destrutturazione fa perdere la reattività: utilizzi toRefs(). ref(null) per i riferimenti agli elementi del template. shallowRef/shallowReactive per le prestazioni. isRef/unref per le utility dei composable.
Domande Frequenti
La lezione «ref() e reactive()» è gratuita?
Sì — il testo completo di «ref() e reactive()» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «ref() e reactive()»?
Creare primitivi reattivi con ref(), racchiudere gli oggetti con reactive() e comprendere quando usare ciascuno dei due e come accedere ai valori di ref tramite .value. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 1 di 4.
Quanto tempo richiede la lezione «ref() e reactive()»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- ref() e reactive()
- computed() e watch()
- La funzione setup() e script setup
- Composables: funzioni di composizione riutilizzabili