Micro-Memoization for Massive Lists with v-memo

Snippet

Micro-Memoization for Massive Lists with v-memo

The v-memo directive provides manual control over a template subtree's update cycle. By providing an array of dependencies, Vue skips the entire virtual DOM diffing process for that element and its children unless one of the dependencies has changed, significantly boosting performance in large lists.

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

Breakdown

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

Defines the conditions under which this DOM node and its children should be re-rendered.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Micro-Memoization for Massive Lists with v-memo

Related