v-memo zur Template-Memoisierung
v-memo-Direktive, Abhängigkeitsarray, Bedingungen für das Überspringen eines Re-Renders und Vergleich mit computed
v-memo zur Template-Memoisierung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. 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 4 Lektionen.
Was ist v-memo
v-memo speichert einen Abschnitt des Templates zwischen. Vue cached die gerenderte Ausgabe und rendert diesen Teilbaum nur dann erneut, wenn sich eine der aufgelisteten Abhängigkeiten ändert. Das ist eine Möglichkeit zur gezielten Performance-Optimierung für aufwendiges, weitgehend statisches Markup.
Das Abhängigkeitsarray
Sie binden ein Array mit Abhängigkeiten. Solange jeder Wert im Array mit seinem vorherigen Wert übereinstimmt, überspringt Vue die Aktualisierung des gesamten Elements und seiner Kinder.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Ein leeres Array
Ein leeres Array v-memo="[]" bedeutet, dass der Inhalt einmal gerendert und danach nie wieder aktualisiert wird – es entspricht dem einmaligen Rendern statischer Inhalte.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Der wichtigste Anwendungsfall: v-for
Der wichtigste Grund für v-memo sind sehr große Listen. Platzieren Sie die Direktive innerhalb von v-for, damit jede Zeile nur dann erneut gerendert wird, wenn sich ihre eigenen relevanten Daten ändern.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Die ausgewählte Zeile zwischenspeichern
Im klassischen Beispiel werden Tausende von Zeilen nur dann erneut gerendert, wenn sich ihr Auswahlstatus ändert. Der Vergleich item.id === selectedId sorgt dafür, dass eine Zeile nur aktualisiert wird, wenn sie ausgewählt oder abgewählt wird.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Alle reaktiven Abhängigkeiten angeben
Sie müssen jeden reaktiven Wert angeben, von dem der Teilbaum abhängt. Wenn Sie einen vergessen, wird das Element bei einer Änderung dieses Werts nicht aktualisiert – ein subtiler Fehler mit veralteter UI.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Nie mit v-if kombinieren
Platzieren Sie v-memo nicht auf demselben Element wie v-if oder auf widersprüchliche Weise mit den strukturellen Direktiven von v-for. Insbesondere werden v-memo und v-if auf demselben Element nicht unterstützt und führen zu undefiniertem Verhalten.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo oder computed
Ein computed cached einen aus reaktivem Zustand abgeleiteten Wert. v-memo cached gerenderte VNodes. Sie lösen unterschiedliche Probleme: computed verhindert die Neuberechnung von Daten, v-memo verhindert das erneute Rendern von Markup.
Wann computed ausreicht
Wenn Ihr Engpass in der Neuberechnung von Daten liegt, etwa beim Filtern, Sortieren oder Formatieren, verwenden Sie zuerst computed – es ist einfacher und schwieriger falsch einzusetzen.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Wann v-memo hilft
Verwenden Sie v-memo nur dann, wenn das Profiling zeigt, dass das erneute Rendern einer großen Liste den größten Anteil der Zeit beansprucht und die meisten Zeilen zwischen den Aktualisierungen unverändert bleiben.
Zuerst messen
v-memo verursacht zusätzlichen Speicherbedarf und Vergleichskosten. Bei kleinen Listen kann die Direktive langsamer sein als normales Rendern. Führen Sie immer vorher und nachher ein Profiling durch, um einen tatsächlichen Vorteil zu bestätigen.
Kurztest
Wann ist v-memo das richtige Werkzeug?
Zusammenfassung
v-memo="[deps]" überspringt das erneute Rendern eines Teilbaums, solange alle aufgeführten Abhängigkeiten unverändert sind – ideal innerhalb großer v-for-Listen. Geben Sie jede reaktive Abhängigkeit an, kombinieren Sie die Direktive nie auf demselben Element mit v-if, bevorzugen Sie computed für abgeleitete Werte und führen Sie immer ein Profiling durch, um einen tatsächlichen Performance-Gewinn zu bestätigen.
Häufig gestellte Fragen
Ist die Lektion „v-memo zur Template-Memoisierung“ kostenlos?
Ja — der vollständige Text von „v-memo zur Template-Memoisierung“ 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 4 Lektionen.
Was lerne ich in „v-memo zur Template-Memoisierung“?
v-memo-Direktive, Abhängigkeitsarray, Bedingungen für das Überspringen eines Re-Renders und Vergleich mit computed 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 1 von 4.
Wie lange dauert die Lektion „v-memo zur Template-Memoisierung“?
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
- v-memo zur Template-Memoisierung
- Profiling mit dem Performance-Tab der Vue Devtools
- Virtuelles Scrollen für große Listen
- Web Worker mit Vue