javascript / expert
Snippet
Mikro-Memoisierung für massive Listen mit v-memo
Die v-memo-Direktive bietet manuelle Kontrolle über den Update-Zyklus eines Template-Teilbaums. Durch die Angabe eines Dependency-Arrays überspringt Vue den gesamten Virtual-DOM-Diffing-Prozess für dieses Element und seine Kinder, es sei denn, eine der Abhängigkeiten hat sich geändert.
snippet.js
javascript
1
2
3
4
5
6
<template><div v-for="row in largeDataset" :key="row.id" v-memo="[row.version, row.isSelected]"><ComplexRow :data="row" /><p>{{ heavyComputation(row) }}</p></div></template>
vue
Erklärung
1
v-memo="[row.version, row.isSelected]"
Definiert die Bedingungen, unter denen dieser DOM-Knoten und seine Kinder neu gerendert werden sollen.