Memoiseringsteknikker
Undgå overflødige beregninger med memoisering.
Memoiseringsteknikker er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 3 lektioner i alt.
Udfør mindre arbejde
Ydeevne opnås ofte ved ikke at genberegne eller gengive ting, der ikke har ændret sig. Vue giver dig flere værktøjer til memoisering, som cacher resultater og springer unødvendige opdateringer over.
Caching af computed-værdier
En computed-egenskab cacher sit resultat og genberegner det kun, når en af dens reaktive afhængigheder ændrer sig. Derfor er den langt billigere end en metode, der kører ved hver gengivelse.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Computed kontra metode
En metode kører, hver gang templaten gengives igen, selv hvis dens input er identisk. En computed-egenskab genbruger sin cachede værdi, så foretræk computed-egenskaber til afledte data, der bruges i templates.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once til statisk indhold
Direktivet v-once gengiver et element én gang og springer det derefter over ved alle fremtidige opdateringer. Brug det til indhold, der aldrig ændrer sig.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Hvornår du skal bruge v-once
Anvend v-once på store statiske sektioner som en sidefod, en vilkårstekst eller et fast sidehoved. Vue behandler det gengivne output som statisk og sammenligner det aldrig med DOM'en igen.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo til krævende lister
Direktivet v-memo cacher et undertræ og gengiver det kun igen, når værdier i dets afhængighedsarray ændrer sig. Det er især nyttigt til store lister.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Sådan fungerer v-memo
Hvert element gengives kun igen, når dets memo-array ændres. Hvis item.selected forbliver det samme, springer Vue helt over at gengive den række igen, selv hvis den overordnede komponent opdateres.
Undgå unødvendig gengivelse igen
Komponenter gengives igen, når deres reaktive data eller egenskaber ændrer sig. Hold komponenterne små og fokuserede, så en ændring ét sted ikke tvinger uvedkommende dele til at blive gengivet igen.
Stabile nøgler i lister
Giv altid v-for en stabil, entydig :key. Hvis du bruger arrayindekset som nøgle, kan Vue genbruge de forkerte DOM-noder og gengive mere end nødvendigt.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Hold reaktive data på et minimum
Læg kun data i den reaktive tilstand, hvis templaten afhænger af dem. Store objekter eller værdier, der aldrig ændrer sig i brugerfladen, giver ekstra belastning for reaktivitetssporingen. Brug almindelige, ikke-reaktive variabler, når det er passende.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Caching af rene funktioner
For rene JavaScript-beregninger uden for Vues reaktivitet kan du cache resultater i et simpelt map, så gentagne kald med samme input returnerer med det samme.
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
}Hurtigt tjek
Test din viden om memoisering.
Opsamling
Reducer spildt arbejde med caching: computed-egenskaber memoisérer afledte værdier, v-once gengiver statisk indhold én gang, og v-memo springer gengivelse af undertræer over i store lister. Brug stabile nøgler, og hold den reaktive tilstand på et minimum. Nu skal du lære at finde og løse flaskehalse med rigtige værktøjer.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Memoiseringsteknikker” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Memoiseringsteknikker”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Memoiseringsteknikker”?
Undgå overflødige beregninger med memoisering. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 3.
Hvor lang tid tager lektionen “Memoiseringsteknikker”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Lazy loading og kodedeling
- Memoiseringsteknikker
- Identifikation og løsning af flaskehalse