javascript / expert
Snippet
Strategisches Micro-Caching mit v-memo
v-memo ist eine leistungsstarke Direktive, die es Entwicklern ermöglicht, die VNode-Erstellung und das Diffing für bestimmte Unterbäume zu überspringen. Durch Definieren eines Abhängigkeits-Arrays rendert Vue das Element nur neu, wenn sich einer der Werte im Array ändert, was einen massiven Leistungsschub für lange Listen bietet.
snippet.js
1
2
3
<div v-for="item in hugeList" :key="item.id" v-memo="[item.id === selectedId, item.updatedAt]"><ComplexComponent :data="item" /></div>
vue
Erklärung
1
v-memo="[item.id === selectedId, item.updatedAt]"
Gibt an, dass dieses Element nur aktualisiert werden soll, wenn sich sein Auswahlstatus oder Zeitstempel ändert.
2
hugeList
Ein typischer Anwendungsfall, bei dem das Standard-Diffing bei schnellen Statusaktualisierungen zum Engpass wird.