Tecniche di memoizzazione
Eviti i calcoli ridondanti con la memoizzazione.
Tecniche di memoizzazione è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. 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 3 lezioni in totale.
Ridurre il lavoro
Le prestazioni spesso migliorano non ricalcolando o eseguendo nuovamente il rendering di elementi che non sono cambiati. Vue offre diversi strumenti di memoizzazione che memorizzano i risultati nella cache ed evitano aggiornamenti non necessari.
Caching dei valori computed
Una proprietà computed memorizza il risultato nella cache e lo ricalcola solo quando cambia una delle sue dipendenze reattive. In questo modo è molto più efficiente di un metodo eseguito a ogni rendering.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Computed e metodi
Un metodo viene eseguito ogni volta che il template esegue nuovamente il rendering, anche se i suoi input sono identici. Una computed riutilizza il valore memorizzato nella cache, quindi preferisca le computed per i dati derivati utilizzati nei template.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once per i contenuti statici
La direttiva v-once esegue il rendering di un elemento una sola volta e lo esclude da tutti gli aggiornamenti successivi. La utilizzi per i contenuti che non cambiano mai.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Quando utilizzare v-once
Applichi v-once a sezioni statiche di grandi dimensioni, come un footer, il testo dei termini o un'intestazione fissa. Vue tratta l'output renderizzato come statico e non lo sottopone mai a un nuovo diff.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo per le liste onerose
La direttiva v-memo memorizza nella cache un sottoalbero e ne esegue nuovamente il rendering solo quando cambiano i valori nel relativo array delle dipendenze. È particolarmente utile per le liste di grandi dimensioni.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Come funziona v-memo
Ogni elemento esegue nuovamente il rendering solo quando cambia il proprio array di memoizzazione. Se item.selected rimane invariato, Vue evita completamente il nuovo rendering di quella riga, anche se il componente padre viene aggiornato.
Evitare ri-rendering non necessari
I componenti eseguono nuovamente il rendering quando cambiano i dati reattivi o le props. Mantenga i componenti piccoli e focalizzati, così una modifica in un'area non costringerà parti non correlate a eseguire nuovamente il rendering.
Chiavi stabili nelle liste
Assegni sempre a v-for una :key stabile e univoca. Utilizzare l'indice dell'array come chiave può portare Vue a riutilizzare i nodi DOM sbagliati e a eseguire più ri-rendering del necessario.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Mantenere minimi i dati reattivi
Inserisca nello stato reattivo solo i dati da cui dipende il template. Oggetti di grandi dimensioni o valori che non cambiano mai nell'interfaccia aggiungono un sovraccarico al monitoraggio della reattività. Quando appropriato, utilizzi semplici variabili non reattive.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Memoizzare le funzioni pure
Per i calcoli JavaScript puri al di fuori della reattività di Vue, può memorizzare i risultati in una semplice mappa, così le chiamate ripetute con lo stesso input restituiscono il risultato istantaneamente.
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}Verifica rapida
Verifichi la Sua conoscenza della memoizzazione.
Riepilogo
Riduca il lavoro sprecato con la memorizzazione nella cache: le proprietà computed memoizzano i valori derivati, v-once esegue il rendering dei contenuti statici una sola volta e v-memo evita il ri-rendering dei sottoalberi nelle liste di grandi dimensioni. Utilizzi chiavi stabili e mantenga minimo lo stato reattivo. Ora imparerà a individuare e risolvere i colli di bottiglia delle prestazioni con strumenti reali.
Domande Frequenti
La lezione «Tecniche di memoizzazione» è gratuita?
Sì — il testo completo di «Tecniche di memoizzazione» è 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 3 lezioni in totale.
Cosa imparerò in «Tecniche di memoizzazione»?
Eviti i calcoli ridondanti con la memoizzazione. 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 2 di 3.
Quanto tempo richiede la lezione «Tecniche di memoizzazione»?
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
- Caricamento lazy e suddivisione del codice
- Tecniche di memoizzazione
- Individuazione e risoluzione dei colli di bottiglia