javascript / expert
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
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
Breakdown
1
v-memo="[row.version, row.isSelected]"
Defines the conditions under which this DOM node and its children should be re-rendered.