v-memo for Template Memoization
v-memo directive, dependency array, when re-render is skipped, comparison with computed.
v-memo for Template Memoization is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is v-memo
v-memo memoizes a section of the template. Vue caches the rendered output and only re-renders that subtree when one of the listed dependencies changes. It is a performance escape hatch for expensive, mostly-static markup.
The Dependency Array
You bind an array of dependencies. As long as every value in the array is equal to its previous value, Vue skips updating the entire element and its children.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>An Empty Array
An empty array v-memo="[]" means the content renders once and never updates - equivalent to rendering static content a single time.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>The Primary Use Case: v-for
The main reason for v-memo is huge lists. Place it inside v-for so each row only re-renders when its own relevant data changes.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Memoizing the Selected Row
In the classic example, thousands of rows only re-render when their selected state flips. Comparing item.id === selectedId means a row updates only when it gains or loses selection.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>List All Reactive Deps
You must include every reactive value the subtree depends on. If you forget one, the element will not update when that value changes - a subtle stale-UI bug.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Never Combine with v-if
Do not place v-memo on the same element as v-if or v-for's structural directives in a conflicting way. Specifically, v-memo and v-if on the same element are not supported and produce undefined behavior.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo vs computed
A computed caches a value derived from reactive state. v-memo caches rendered VNodes. They solve different problems: computed avoids recalculating data, v-memo avoids re-rendering markup.
When computed Is Enough
If your bottleneck is recomputing data (filtering, sorting, formatting), reach for computed first - it is simpler and harder to misuse.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);When v-memo Helps
Reach for v-memo only when profiling shows that re-rendering a large list dominates, and most rows are unchanged between updates.
Measure First
v-memo adds memory overhead and comparison cost. For small lists it can be slower than plain rendering. Always profile before and after to confirm a real win.
Quick Check
When is v-memo the right tool?
Recap
v-memo="[deps]" skips re-rendering a subtree while all listed deps are unchanged - ideal inside large v-for lists. List every reactive dependency, never combine it with v-if on the same element, prefer computed for derived values, and always profile to confirm a real performance gain.
Frequently asked questions
Is the “v-memo for Template Memoization” lesson free?
Yes — the full text of “v-memo for Template Memoization” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “v-memo for Template Memoization”?
v-memo directive, dependency array, when re-render is skipped, comparison with computed. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “v-memo for Template Memoization” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- v-memo for Template Memoization
- Profiling with Vue DevTools Performance Tab
- Virtual Scrolling for Large Lists
- Web Workers with Vue