Vue Academy · Lektion

Memoization-Techniken

Vermeiden Sie redundante Berechnungen durch Memoization.

Memoization-Techniken ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Weniger Arbeit

Performance entsteht häufig dadurch, dass Dinge, die sich nicht geändert haben, nicht neu berechnet oder gerendert werden. Vue bietet mehrere Memoization-Werkzeuge, die Ergebnisse zwischenspeichern und unnötige Aktualisierungen überspringen.

Caching mit computed

Eine computed-Eigenschaft speichert ihr Ergebnis zwischen und berechnet es nur neu, wenn sich eine ihrer reaktiven Abhängigkeiten ändert. Dadurch ist sie deutlich günstiger als eine Methode, die bei jedem Rendern ausgeführt wird.

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

Computed vs. Methode

Eine Methode wird bei jedem erneuten Rendern des Templates ausgeführt, selbst wenn ihre Eingaben identisch sind. Ein computed-Wert verwendet seinen zwischengespeicherten Wert erneut. Verwenden Sie daher für abgeleitete Daten im Template bevorzugt computed-Eigenschaften.

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

v-once für statische Inhalte

Die Direktive v-once rendert ein Element genau einmal und überspringt es anschließend bei allen zukünftigen Aktualisierungen. Verwenden Sie sie für Inhalte, die sich nie ändern.

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

Wann Sie v-once verwenden sollten

Wenden Sie v-once auf große statische Bereiche wie eine Fußzeile, einen Text mit Nutzungsbedingungen oder eine feste Kopfzeile an. Vue behandelt die gerenderte Ausgabe als statisch und führt dafür nie wieder einen Diff-Vergleich durch.

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

v-memo für aufwendige Listen

Die Direktive v-memo memoisiert einen Teilbaum und rendert ihn nur dann neu, wenn sich Werte in ihrem Abhängigkeitsarray ändern. Besonders bei großen Listen spielt sie ihre Stärken aus.

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

So funktioniert v-memo

Jedes Element wird nur dann erneut gerendert, wenn sich sein Memo-Array ändert. Wenn item.selected gleich bleibt, überspringt Vue das erneute Rendern dieser Zeile vollständig, selbst wenn der übergeordnete Bestandteil aktualisiert wird.

Unnötiges erneutes Rendern vermeiden

Komponenten werden neu gerendert, wenn sich ihre reaktiven Daten oder Props ändern. Halten Sie Komponenten klein und fokussiert, damit eine Änderung in einem Bereich nicht dazu führt, dass unabhängige Teile neu gerendert werden.

Stabile Schlüssel in Listen

Geben Sie v-for immer einen stabilen, eindeutigen :key. Wenn Sie den Array-Index als Schlüssel verwenden, kann Vue die falschen DOM-Knoten wiederverwenden und mehr als nötig neu rendern.

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

Reaktive Daten auf das Nötigste beschränken

Nehmen Sie Daten nur dann in den reaktiven Zustand auf, wenn das Template davon abhängt. Große Objekte oder Werte, die sich in der UI nie ändern, verursachen zusätzlichen Aufwand bei der Reaktivitätsverfolgung. Verwenden Sie bei Bedarf einfache, nicht reaktive Variablen.

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

Reine Funktionen memoizieren

Für reine JavaScript-Berechnungen außerhalb der Vue-Reaktivität können Sie Ergebnisse in einer einfachen Map zwischenspeichern, sodass wiederholte Aufrufe mit derselben Eingabe sofort zurückgegeben werden.

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
}

Kurztest

Testen Sie Ihr Wissen über Memoization.

Zusammenfassung

Reduzieren Sie unnötige Arbeit durch Caching: computed-Eigenschaften memoizieren abgeleitete Werte, v-once rendert statische Inhalte genau einmal, und v-memo überspringt das erneute Rendern von Teilbäumen in großen Listen. Verwenden Sie stabile Schlüssel und halten Sie den reaktiven Zustand so klein wie möglich. Als Nächstes lernen Sie, Performance-Engpässe mit echten Werkzeugen zu finden und zu beheben.

Häufig gestellte Fragen

Ist die Lektion „Memoization-Techniken“ kostenlos?

Ja — der vollständige Text von „Memoization-Techniken“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Memoization-Techniken“?

Vermeiden Sie redundante Berechnungen durch Memoization. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Memoization-Techniken“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy