Teknikker for memoization
Unngå unødvendige beregninger med memoization.
Teknikker for memoization er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 2 av 3. 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 3 leksjoner.
Gjøre mindre arbeid
Ytelse handler ofte om å ikke beregne eller gjengi på nytt ting som ikke har endret seg. Vue gir deg flere verktøy for memoisering som bufrer resultater og hopper over unødvendige oppdateringer.
Bufring av computed-verdier
En computed-egenskap bufrer resultatet sitt og beregner det bare på nytt når en av de reaktive avhengighetene endres. Dette gjør den langt mindre kostbar enn en metode som kjøres ved hver gjengivelse.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}computed kontra metode
En metode kjøres hver gang malen gjengis på nytt, selv om inndataene er identiske. En computed gjenbruker den bufrede verdien, så foretrekk computed-egenskaper for avledede data som brukes i maler.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once for statisk innhold
Direktivet v-once gjengir et element én gang og hopper deretter over det ved alle fremtidige oppdateringer. Bruk det for innhold som aldri endres.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Når du bør bruke v-once
Bruk v-once på store statiske deler, for eksempel en bunntekst, vilkårstekst eller en fast topptekst. Vue behandler det gjengitte resultatet som statisk og sammenligner det aldri på nytt.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo for kostbare lister
Direktivet v-memo memorerer et deltre og gjengir det bare på nytt når verdier i avhengighetsarrayet endres. Det er spesielt nyttig for store lister.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Slik fungerer v-memo
Hvert element gjengis på nytt bare når memo-arrayet endres. Hvis item.selected forblir uendret, hopper Vue helt over gjengivelsen av den raden, selv om forelderen oppdateres.
Unngå unødvendig re-rendering
Komponenter gjengis på nytt når reaktive data eller props endres. Hold komponentene små og fokuserte, slik at en endring i ett område ikke tvinger urelaterte deler til å gjengis på nytt.
Stabile nøkler i lister
Gi alltid v-for en stabil og unik :key. Hvis du bruker arrayindeksen som nøkkel, kan Vue gjenbruke feil DOM-noder og gjengi mer enn nødvendig.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Hold reaktive data på et minimum
Legg bare data i reaktiv tilstand hvis malen er avhengig av dem. Store objekter eller verdier som aldri endres i brukergrensesnittet, legger ekstra belastning på reaktivitetssporingen. Bruk vanlige, ikke-reaktive variabler når det passer.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Memoisering av rene funksjoner
For rene JavaScript-beregninger utenfor Vues reaktivitet kan du bufre resultater i et enkelt map, slik at gjentatte kall med samme inndata returnerer umiddelbart.
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
}Hurtigsjekk
Test kunnskapen din om memoisering.
Oppsummering
Reduser bortkastet arbeid med bufring: computed-egenskaper memorerer avledede verdier, v-once gjengir statisk innhold én gang, og v-memo hopper over gjengivelse av deltrær i store lister. Bruk stabile nøkler og hold reaktiv tilstand på et minimum. Deretter skal du lære å finne og løse ytelsesflaskehalser med ekte verktøy.
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 «Teknikker for memoization» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Teknikker for memoization», 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 3 leksjoner.
Hva lærer jeg i «Teknikker for memoization»?
Unngå unødvendige beregninger med memoization. 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 2 av 3.
Hvor lang tid tar leksjonen «Teknikker for memoization»?
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
- Lazy loading og kodedeling
- Teknikker for memoization
- Identifisere og løse flaskehalser