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.