javascript / intermediate
Snippet
Template Memoization with v-memo
v-memo is a performance directive that memoizes a sub-tree of the template. It only re-renders the element and its children if one of the values in the dependency array has changed, significantly speeding up large list updates.
snippet.js
javascript
1
2
3
4
<div v-for="item in list" :key="item.id" v-memo="[item.id === selectedId]"><p>{{ item.name }} - {{ item.status }}</p><ComplexComponent :data="item" /></div>
vue
Breakdown
1
v-memo="[item.id === selectedId]"
The sub-tree will only update if the result of this comparison changes.