v-memo for conditional memoization in Vue - Step-by-Step Execution

Concept Flow - v-memo for conditional memoization

Component renders

↓

Evaluate v-memo condition

↓

Skip re-render

↓

Update DOM only if needed

The component renders and checks the v-memo condition. If true, it skips re-rendering the memoized part, else it re-renders and updates the DOM.

Execution Sample

Vue

<template>
  <div>
    <p v-memo="[count]">Count is {{ count }}</p>
    <button @click="count++">Increment count</button>
    <button @click="other++">Change other</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const other = ref(0)
</script>

This Vue component demonstrates v-memo: the paragraph re-renders only when 'count' changes (click 'Increment count'), but skips when only 'other' changes (click 'Change other').

Execution Table

Step	Action	v-memo Condition Value	Re-render Memoized Content?	DOM Update
1	Initial render	[0]	Yes	Render <p>Count is 0</p>
2	Click 'Increment count', count = 1	[1]	Yes	Update <p>Count is 1</p>
3	Click 'Change other', count = 1 (no change)	[1]	No	No DOM update
4	Click 'Increment count', count = 2	[2]	Yes	Update <p>Count is 2</p>
5	Click 'Change other', count = 2 (no change)	[2]	No	No DOM update

💡 Execution stops when no further user interaction occurs.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
count	0	1	1	2	2
v-memo condition	[0]	[1]	[1]	[2]	[2]
Re-render memoized content	Yes	Yes	No	Yes	No

Key Moments - 2 Insights

Why does the memoized content not re-render when the count value stays the same?

Because v-memo compares the condition array values. If they are unchanged (see step 3 and 5 in execution_table), Vue skips re-rendering to optimize performance.

What happens if the v-memo condition array changes?

Vue detects the change (steps 2 and 4) and re-renders the memoized content, updating the DOM accordingly.

Visual Quiz - 3 Questions

Look at the execution table, at which step does Vue skip re-rendering the memoized content?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Check the 'Re-render Memoized Content?' column in the execution_table.

What is the value of 'count' after step 4 in the variable_tracker?

A 1

B 2

C 0

D 3

💡 Hint

Look at the 'count' row under 'After Step 4' in variable_tracker.

If the v-memo condition array was empty, what would happen on each button click?

A Memoized content never re-renders

B Memoized content re-renders only on first click

C Memoized content always re-renders

D Vue throws an error

💡 Hint

Think about how v-memo uses the condition array to decide re-rendering.

Concept Snapshot

v-memo in Vue lets you skip re-rendering parts of the template when specified reactive values don't change.
Use it by passing an array of dependencies like v-memo="[dep1, dep2]".
If dependencies are unchanged, Vue reuses the previous render.
This improves performance by avoiding unnecessary DOM updates.
Always include reactive variables that affect the memoized content.

Full Transcript

This visual trace shows how Vue's v-memo directive works for conditional memoization. Initially, the component renders the paragraph showing count 0. When the 'Increment count' button is clicked, count increments and the v-memo condition array changes, triggering a re-render of the memoized content and updating the DOM. When the 'Change other' button is clicked, the count value does not change, v-memo detects the same condition array and skips re-rendering, saving work. This cycle repeats with each button click. The variable tracker shows how count and the v-memo condition change step-by-step. Key moments clarify why memoization skips updates when dependencies are unchanged. The quiz tests understanding of when re-renders happen and how v-memo uses the condition array.