javascript / expert
Snippet
Strategic Micro-Caching with v-memo
v-memo is a powerful directive that allows developers to skip VNode creation and diffing for specific subtrees. By defining a dependency array, Vue only re-renders the element if one of the values in the array changes, providing a massive performance boost for long lists.
snippet.js
1
2
3
<div v-for="item in hugeList" :key="item.id" v-memo="[item.id === selectedId, item.updatedAt]"><ComplexComponent :data="item" /></div>
vue
Breakdown
1
v-memo="[item.id === selectedId, item.updatedAt]"
Specifies that this element should only update if its selection state or timestamp changes.
2
hugeList
A typical use case where standard diffing becomes a bottleneck during rapid state updates.