Mikro-Memoisierung für massive Listen mit v-memo

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
<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

v-memo="[row.version, row.isSelected]"

Definiert die Bedingungen, unter denen dieser DOM-Knoten und seine Kinder neu gerendert werden sollen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek