0Pricing
Vue Academy · Lezione

Reattività avanzata: shallowRef e triggerRef

shallowRef per le prestazioni, markRaw per escludere dalla reattività, triggerRef per l'attivazione manuale.

Reattività avanzata: shallowRef e triggerRef è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Oltre ref e reactive

La reattività profonda di Vue è comoda, ma non sempre è ciò che serve. Per oggetti grandi o istanze esterne, il tracciamento profondo è inefficiente. Vue offre shallowRef, triggerRef e markRaw per un controllo più preciso.

Come ref esegue il tracciamento profondo

Un normale ref che contiene un oggetto rende l'intero oggetto profondamente reattivo: la modifica di qualsiasi proprietà annidata attiva gli aggiornamenti. È ideale per stati piccoli, ma costoso per strutture di grandi dimensioni.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: solo .value è reattivo

shallowRef tiene traccia della riassegnazione di .value, ma non tiene traccia delle mutazioni all'interno del valore contenuto. Le modifiche interne non attivano il rendering.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

Quando utilizzare shallowRef

Lo utilizzi per dati di grandi dimensioni, quasi immutabili, che sostituisce interamente, oppure per racchiudere oggetti esterni (un'istanza di grafico o un dataset di grandi dimensioni) quando il tracciamento profondo aggiunge overhead senza alcun vantaggio.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

Il problema delle mutazioni profonde

A volte si modifica effettivamente il contenuto di uno shallowRef (per motivi di prestazioni), ma si ha comunque bisogno di un nuovo rendering in un momento controllato. Vue non riesce a rilevare la modifica e l’interfaccia utente rimane obsoleta.

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: forzare un aggiornamento

triggerRef forza manualmente la riesecuzione degli effetti che dipendono da uno shallow ref, dopo averne modificato il contenuto. È possibile raggruppare molte modifiche e poi attivare l’aggiornamento una sola volta.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

Una strategia per le prestazioni

La strategia consiste nel mantenere una struttura di grandi dimensioni in shallowRef, modificarla liberamente senza il costo della reattività a ogni cambiamento e chiamare poi triggerRef una sola volta, quando si desidera che la vista rifletta tutte le modifiche.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: rinunciare completamente alla reattività

markRaw contrassegna un oggetto in modo che Vue non lo renda mai reattivo, nemmeno all’interno di un reactive o di un ref normale. Lo utilizzi per le istanze di classi di terze parti che non devono essere avvolte in un proxy.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

Perché markRaw è importante

Avvolgere istanze complesse di classi (mappe, editor, websocket) in un proxy reattivo può interrompere i loro riferimenti interni o causare bug difficili da individuare. markRaw le mantiene intatte, pur lasciandole all’interno dello stato reattivo.

Combinare gli strumenti

Questi strumenti possono essere combinati: uno shallowRef che contiene un’istanza markRaw offre uno slot che è possibile sostituire in modo reattivo, con un oggetto interno che Vue non avvolge mai in un proxy — una soluzione ideale per le integrazioni esterne.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

Costo della reattività e controllo

Il compromesso è il seguente: la reattività profonda è semplice da usare, ma più onerosa; le API shallow offrono controllo e prestazioni migliori, al costo di dover attivare manualmente gli aggiornamenti. Vi ricorra solo quando il profiling dimostra che è necessario.

Verifica rapida

Verifichi la Sua comprensione della reattività avanzata.

Riepilogo

Ha imparato a usare i controlli avanzati della reattività:

  • shallowRef reagisce solo alla riassegnazione di .value, non alle modifiche interne — è utile per dati di grandi dimensioni o esterni.
  • triggerRef forza manualmente gli aggiornamenti dopo la modifica del contenuto di uno shallow ref (si raggruppano le modifiche e si attiva l’aggiornamento una sola volta).
  • markRaw esclude permanentemente un oggetto dalla reattività, una soluzione ideale per le istanze di classi di terze parti.
  • Questi strumenti offrono prestazioni e controllo migliori, al costo di dover attivare manualmente gli aggiornamenti.

Domande Frequenti

La lezione «Reattività avanzata: shallowRef e triggerRef» è gratuita?

Sì — il testo completo di «Reattività avanzata: shallowRef e triggerRef» è 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 «Reattività avanzata: shallowRef e triggerRef»?

shallowRef per le prestazioni, markRaw per escludere dalla reattività, triggerRef per l'attivazione manuale. 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 1 di 4.

Quanto tempo richiede la lezione «Reattività avanzata: shallowRef e triggerRef»?

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

  1. Reattività avanzata: shallowRef e triggerRef
  2. Factory di composable e composable parametrizzati
  3. Macchine a stati con XState in Vue
  4. effectScope per raggruppare gli effetti
← Torna a Vue Academy