v-memo Memoize Subtree Rendering
Last updated: 2026-10-22
v-memo Memoize Subtree Rendering
v-memo takes a dependency array; when unchanged the whole subtree is skipped — a performance tool for very long lists (Vue 3.2+).
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.2+ |
| SSR Support | Yes |
📝 Syntax
<div v-memo="[valueA, valueB]">...</div>
<li v-for="item in list" :key="item.id" v-memo="[item.selected]">⚙️ Arguments
| expression | An array of dependencies; identical values skip the update (an empty array equals v-once) |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
The number only updates when the dependency changes — a demo of skipping updates in long lists.💡 Key Points
⚠️ Warning Use only when profiling shows a bottleneck: a missed dependency means stale UI.
ℹ️ Note Its main use is with v-for: v-memo="[item.selected]" skips diffing unselected rows.
💡 Tip v-memo="[]" behaves like v-once (never re-renders).
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q When should I use v-memo?
A When long lists with heavy static content visibly lag — profile first, then apply.
Q What happens if dependencies are wrong?
A A missing dependency means stale UI; extra dependencies merely lose the benefit.
Q How does it relate to v-once?
A v-memo="[]" equals v-once; normally it is a conditional skip.
