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.

Practice

1. What is the main purpose of v-memo in Vue?

easy

A. To skip re-rendering parts of the template when watched values don't change

B. To force Vue to always re-render a component

C. To create reactive data properties

D. To handle user input events

Solution

1. Step 1: Understand what v-memo does

   v-memo watches specific values and skips re-rendering if they remain unchanged.

2. Step 2: Compare options with this behavior

   Only To skip re-rendering parts of the template when watched values don't change describes skipping re-rendering based on watched values, matching v-memo's purpose.

3. Final Answer:

   To skip re-rendering parts of the template when watched values don't change -> Option A

4. Quick Check:

   v-memo skips re-rendering [OK]

Hint: Remember: v-memo skips updates if values unchanged [OK]

Common Mistakes:

• Confusing v-memo with event handling
• Thinking v-memo creates reactive data
• Assuming v-memo forces re-rendering

2. Which of the following is the correct syntax to use v-memo watching variables count and user.name?

easy

A. <div v-memo="[count, user.name]">...

B. <div v-memo="count, user.name">...

C. <div v-memo="{count, user.name}">...

D. <div v-memo="count && user.name">...

Solution

1. Step 1: Recall the syntax for v-memo

   v-memo expects an array of values to watch, so the correct syntax uses square brackets.

2. Step 2: Check each option's syntax

   <div v-memo="[count, user.name]">... uses an array with square brackets, which is correct. Options A, B, and C use incorrect formats (logical AND, comma-separated without brackets, object).

3. Final Answer:

   <div v-memo="[count, user.name]">... -> Option A

4. Quick Check:

   v-memo needs array syntax [OK]

Hint: Use square brackets for v-memo watched values [OK]

Common Mistakes:

• Omitting brackets around watched values
• Using object braces instead of array brackets
• Using logical operators instead of array

3. Given this Vue template snippet:

<template>
  <div v-memo="[count]">Count is {{ count }}</div>
</template>

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

setTimeout(() => { count.value = 0 }, 1000)
</script>

What will happen after 1 second?

medium

A. The div will re-render but display the old count

B. The div will re-render and update the displayed count

C. Vue will throw a runtime error due to v-memo usage

D. The div will not re-render because count did not change

Solution

1. Step 1: Understand the watched value and update

   The v-memo watches count. After 1 second, count.value is set to 0, which is the same as its initial value.

2. Step 2: Determine if re-render occurs

   Since the watched value did not change, v-memo skips re-rendering the div.

3. Final Answer:

   The div will not re-render because count did not change -> Option D

4. Quick Check:

   v-memo skips if values unchanged [OK]

Hint: If watched values stay same, v-memo skips update [OK]

Common Mistakes:

• Assuming re-render happens even if value unchanged
• Confusing ref value assignment with new value
• Thinking v-memo causes errors on no change

4. Identify the error in this usage of v-memo:

<template>
  <div v-memo="count">Count: {{ count }}</div>
</template>

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

medium

A. The template must use v-if with v-memo

B. count should be a computed property, not a ref

C. v-memo expects an array, but count is not in brackets

D. There is no error; this is valid usage

Solution

1. Step 1: Check v-memo syntax requirements

   v-memo requires an array of values to watch, so the value must be inside square brackets.

2. Step 2: Analyze the given code

   The code uses v-memo="count" without brackets, which is incorrect syntax.

3. Final Answer:

   v-memo expects an array, but count is not in brackets -> Option C

4. Quick Check:

   v-memo needs array syntax [OK]

Hint: Always wrap watched values in brackets for v-memo [OK]

Common Mistakes:

• Using single variable without brackets
• Confusing refs with computed properties
• Thinking v-memo requires v-if

5. You want to optimize a list rendering in Vue where each item has a status and value. You only want to re-render an item if its status changes, ignoring value. How should you use v-memo inside the v-for loop?

hard

A. <li v-for="item in items" :key="item.id" v-memo="[item.value]">{{ item.value }}</li>

B. <li v-for="item in items" :key="item.id" v-memo="[item.status]">{{ item.value }}</li>

C. <li v-for="item in items" :key="item.id" v-memo="[item.status, item.value]">{{ item.value }}</li>

D. <li v-for="item in items" :key="item.id">{{ item.value }}</li> (no v-memo needed)

Solution

1. Step 1: Identify which value controls re-rendering

   You want to re-render only when item.status changes, ignoring item.value.

2. Step 2: Use v-memo with the correct watched value

   Setting v-memo="[item.status]" watches only the status, so changes in value won't trigger re-render.

3. Final Answer:

   <li v-for="item in items" :key="item.id" v-memo="[item.status]">{{ item.value }}</li> -> Option B

4. Quick Check:

   Watch only status for re-render [OK]

Hint: Watch only needed props in v-memo to optimize updates [OK]

Common Mistakes:

• Watching value instead of status
• Watching both status and value unnecessarily
• Not using v-memo and causing extra renders