v-memo for memoization i templates
v-memo-direktivet, avhengighetsarrayet, når re-rendering hoppes over og sammenligning med computed.
v-memo for memoization i templates er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva er v-memo
v-memo memoiserer en del av malen. Vue mellomlagrer det rendrende resultatet og rendrer bare underområdet på nytt når en av de oppførte avhengighetene endres. Det er en ytelsesmekanisme for kostbar, hovedsakelig statisk markup.
Avhengighetsarrayet
Bind et array med avhengigheter. Så lenge alle verdiene i arrayet er lik de tidligere verdiene, hopper Vue over oppdateringen av hele elementet og barna dets.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Et tomt array
Et tomt array, v-memo="[]", betyr at innholdet rendres én gang og aldri oppdateres – det tilsvarer å rendre statisk innhold én enkelt gang.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Det viktigste bruksområdet: v-for
Hovedgrunnen til å bruke v-memo er enorme lister. Plasser det inne i v-for, slik at hver rad bare rendres på nytt når de relevante dataene for raden endres.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Memoisering av valgt rad
I det klassiske eksempelet rendres tusenvis av rader bare på nytt når valgt-tilstanden endres. Sammenligningen item.id === selectedId betyr at en rad bare oppdateres når den blir valgt eller ikke lenger er valgt.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Oppgi alle reaktive avhengigheter
De må ta med alle reaktive verdier som underområdet avhenger av. Hvis én mangler, oppdateres ikke elementet når denne verdien endres – en subtil feil med utdatert brukergrensesnitt.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Kombiner aldri med v-if
Ikke plasser v-memo på det samme elementet som v-if eller v-fors strukturdirektiv på en motstridende måte. Konkret støttes ikke v-memo og v-if på det samme elementet, og det gir udefinert atferd.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo kontra computed
En computed mellomlagrer en verdi som er utledet fra reaktiv tilstand. v-memo mellomlagrer rendrende VNodes. De løser ulike problemer: computed unngår å beregne data på nytt, mens v-memo unngår å rendre markup på nytt.
Når computed er nok
Hvis flaskehalsen er at data må beregnes på nytt, for eksempel filtrering, sortering eller formatering, bør De først bruke computed – det er enklere og vanskeligere å misbruke.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Når v-memo hjelper
Bruk v-memo bare når profilering viser at rendring av en stor liste på nytt utgjør hovedbelastningen, og de fleste radene er uendret mellom oppdateringene.
Mål først
v-memo gir ekstra minnebruk og kostnader ved sammenligning. For små lister kan det være tregere enn vanlig rendring. Profiler alltid før og etter for å bekrefte en reell gevinst.
Hurtigsjekk
Når er v-memo det riktige verktøyet?
Oppsummering
v-memo="[deps]" hopper over ny rendring av et underområde så lenge alle de oppførte avhengighetene er uendret – ideelt inne i store v-for-lister. Oppgi alle reaktive avhengigheter, kombiner det aldri med v-if på det samme elementet, foretrekk computed for utledede verdier, og profiler alltid for å bekrefte en reell ytelsesgevinst.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «v-memo for memoization i templates» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «v-memo for memoization i templates», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «v-memo for memoization i templates»?
v-memo-direktivet, avhengighetsarrayet, når re-rendering hoppes over og sammenligning med computed. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «v-memo for memoization i templates»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- v-memo for memoization i templates
- Profilering med ytelsesfanen i Vue DevTools
- Virtuell scrolling for store lister
- Web Workers med Vue