Vue3 v-memo-Direktive
Vue3 Eingebaute Direktivenv-memoDie Direktive wird verwendet, um den Unterbaum einer Vorlage zu memoisieren und zu entscheiden, ob Aktualisierungen übersprungen werden, indem ein Array von Abhängigkeitswerten angegeben wird.
Nur in Vue 3.2+ verfügbar.
Grundlegende Beschreibung
v-memoDie Direktive ermöglicht es Ihnen, einen Teil einer Vorlage zu memoisieren. Sie erwartet ein Array fester Länge von Abhängigkeitswerten. Wenn jeder Wert im Array mit dem letzten Rendern identisch ist, wird die Aktualisierung des gesamten Unterbaums übersprungen.
- Erwarteter Typ: any[]
- Wirkung: Den Vorlagen-Unterbaum memoisieren und entscheiden, ob Aktualisierungen übersprungen werden, indem ein Array von Abhängigkeitswerten angegeben wird.
Grundlegende Syntax
Beispiel
<!-- Wenn sowohl valueA als auch valueB unverändert bleiben, Aktualisierung überspringen -->
<div v-memo="[valueA, valueB]">
<!-- Inhalt -->
</div>
<!-- Ein leeres Array ist äquivalent zu v-once -->
<div v-memo="[]">
Niemals aktualisieren
</div>
<div v-memo="[valueA, valueB]">
<!-- Inhalt -->
</div>
<!-- Ein leeres Array ist äquivalent zu v-once -->
<div v-memo="[]">
Niemals aktualisieren
</div>
Anwendungsfälle
1. Optimierung langer Listen
v-memo ist besonders nützlich beim Umgang mit großen Listen und ermöglicht es, Listeneinträge zu überspringen, die nicht aktualisiert werden müssen:
Beispiel
<template>
<div class="list">
<div
v-for="item in items"
:key="item.id"
v-memo="[item.isSelected, item.isExpanded]"
class="item"
>
<div class="header">{{ item.title }}</div>
<div v-if="item.isExpanded" class="content">
{{ item.description }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, title: 'Title 1', description: 'Description 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Title 2', description: 'Description 2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
<div class="list">
<div
v-for="item in items"
:key="item.id"
v-memo="[item.isSelected, item.isExpanded]"
class="item"
>
<div class="header">{{ item.title }}</div>
<div v-if="item.isExpanded" class="content">
{{ item.description }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, title: 'Title 1', description: 'Description 1', isSelected: true, isExpanded: false },
{ id: 2, title: 'Title 2', description: 'Description 2', isSelected: false, isExpanded: true }
]
}
}
}
</script>
Unterschied zwischen v-memo und v-once
| Direktive | Wirkung | Anwendungsfall |
|---|---|---|
| v-once | Niemals aktualisieren | Inhalt ist vollständig statisch, keine Aktualisierungen erforderlich |
| v-memo | Keine Aktualisierung, wenn Abhängigkeiten unverändert bleiben | Inhalt muss nur aktualisiert werden, wenn sich bestimmte Abhängigkeiten ändern |
Andere Erweiterungen