v-memo per la memoizzazione dei template
Direttiva v-memo, array delle dipendenze, casi in cui il rendering viene saltato, confronto con computed.
v-memo per la memoizzazione dei template è 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.
Che cos'è v-memo
v-memo memorizza una sezione del template. Vue memorizza l'output renderizzato e renderizza nuovamente quel sottoalbero solo quando cambia una delle dipendenze elencate. È uno strumento di ottimizzazione da usare per markup costoso e per lo più statico.
L'array delle dipendenze
Si associa un array di dipendenze. Finché ogni valore dell'array è uguale al valore precedente, Vue evita di aggiornare l'intero elemento e i relativi figli.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Un array vuoto
Un array vuoto v-memo="[]" significa che il contenuto viene renderizzato una volta e non viene mai aggiornato, equivalente a renderizzare il contenuto statico una sola volta.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Il principale caso d'uso: v-for
Il motivo principale per usare v-memo sono le liste molto grandi. Inserirlo all'interno di v-for, così ogni riga viene renderizzata nuovamente solo quando cambiano i dati rilevanti per quella riga.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Memorizzare la riga selezionata
Nell'esempio classico, migliaia di righe vengono renderizzate nuovamente solo quando cambia il loro stato di selezione. Il confronto item.id === selectedId fa sì che una riga venga aggiornata solo quando viene selezionata o deselezionata.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Elencare tutte le dipendenze reattive
È necessario includere ogni valore reattivo da cui dipende il sottoalbero. Se ne viene dimenticato uno, l'elemento non si aggiornerà quando quel valore cambia: si tratta di un sottile bug di interfaccia obsoleta.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Non combinarlo mai con v-if
Non applicare v-memo allo stesso elemento di v-if o delle direttive strutturali di v-for in modo conflittuale. In particolare, v-memo e v-if sullo stesso elemento non sono supportati e producono un comportamento non definito.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo e computed
Un computed memorizza un valore derivato dallo stato reattivo. v-memo memorizza i VNode renderizzati. Risolvono problemi diversi: computed evita di ricalcolare i dati, mentre v-memo evita di renderizzare nuovamente il markup.
Quando computed è sufficiente
Se il collo di bottiglia è il ricalcolo dei dati, ad esempio per filtraggio, ordinamento o formattazione, ricorrere prima a computed: è più semplice e più difficile da usare in modo errato.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Quando v-memo è utile
Ricorrere a v-memo solo quando il profiling mostra che il rendering ripetuto di una lista grande costituisce il principale costo e la maggior parte delle righe non cambia tra un aggiornamento e l'altro.
Misurare prima
v-memo comporta un overhead di memoria e un costo di confronto. Per le liste piccole può essere più lento del rendering normale. Eseguire sempre il profiling prima e dopo per confermare un reale vantaggio.
Verifica rapida
Quando è opportuno usare v-memo?
Riepilogo
v-memo="[deps]" evita di renderizzare nuovamente un sottoalbero finché tutte le dipendenze elencate rimangono invariate: è ideale all'interno di liste v-for grandi. Elencare ogni dipendenza reattiva, non combinarlo mai con v-if sullo stesso elemento, preferire computed per i valori derivati ed eseguire sempre il profiling per confermare un reale miglioramento delle prestazioni.
Domande Frequenti
La lezione «v-memo per la memoizzazione dei template» è gratuita?
Sì — il testo completo di «v-memo per la memoizzazione dei template» è 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 «v-memo per la memoizzazione dei template»?
Direttiva v-memo, array delle dipendenze, casi in cui il rendering viene saltato, confronto con 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 1 di 4.
Quanto tempo richiede la lezione «v-memo per la memoizzazione dei template»?
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
- v-memo per la memoizzazione dei template
- Profilazione con la scheda Performance di Vue DevTools
- Scorrimento virtuale per grandi elenchi
- Web Worker con Vue