Back
VueHardNew
What is `v-memo` and when would you use it?
Memoizing a template subtree based on a dependency array
Ideal Answer
v-memo memoizes a template subtree, skipping updates as long as a given dependency array's values haven't changed. It's a performance optimization for very large v-for lists where re-rendering unaffected rows is costly.
JavaScript
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
<span>{{ item.name }}</span>
<input v-model="item.selected" type="checkbox">
</div>
Here, the row skips re-rendering unless item.selected changes. This is a niche, advanced optimization — most apps never need it, and misuse can cause stale UI if you forget to include a dependency that affects rendering.