javascript / intermediate
Snippet
Template-Memoisierung mit v-memo
v-memo ist eine Performance-Direktive, die einen Teilbaum des Templates memoisiert. Das Element und seine Kinder werden nur dann neu gerendert, wenn sich einer der Werte im Abhängigkeits-Array geändert hat, was die Aktualisierung großer Listen erheblich beschleunigt.
snippet.js
javascript
1
2
3
4
<div v-for="item in list" :key="item.id" v-memo="[item.id === selectedId]"><p>{{ item.name }} - {{ item.status }}</p><ComplexComponent :data="item" /></div>
vue
Erklärung
1
v-memo="[item.id === selectedId]"
Der Teilbaum wird nur aktualisiert, wenn sich das Ergebnis dieses Vergleichs ändert.