v-memo for conditional memoization in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does v-memo affect component rendering?

Consider a Vue component using v-memo with a dependency array. What happens when a reactive property outside the dependency array changes?

Vue

<template>
  <div v-memo="[count]">Count is: {{ count }}</div>
  <button @click="increment">Increment</button>
  <button @click="changeName">Change Name</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const name = ref('Vue')
function increment() {
  count.value++
}
function changeName() {
  name.value = name.value === 'Vue' ? 'JS' : 'Vue'
}
</script>

A The <code>div</code> re-renders only when <code>count</code> changes, not when <code>name</code> changes.

B The <code>div</code> re-renders whenever <code>count</code> or <code>name</code> changes.

C The <code>div</code> never re-renders after initial render.

D The <code>div</code> re-renders only when <code>name</code> changes.

💡 Hint

Think about what v-memo watches to decide re-rendering.

v-memo tells Vue to re-render the element only if the values in its dependency array change. Since only count is in the array, changes to name do not trigger re-render.

📝 Syntax

intermediate

Identify the correct v-memo syntax for multiple dependencies

Which of the following is the correct way to use v-memo with two reactive dependencies foo and bar?

A <div v-memo="foo && bar">Content</div>

B <div v-memo="foo, bar">Content</div>

C <div v-memo="{foo, bar}">Content</div>

D <div v-memo="[foo, bar]">Content</div>

💡 Hint

Remember that v-memo expects an array of dependencies.

The correct syntax uses an array to list dependencies: [foo, bar]. Other options are invalid JavaScript expressions or do not represent arrays.

🔧 Debug

advanced

Why does this v-memo not prevent re-rendering?

Given this code snippet, why does the element re-render even when count does not change?

<template>
  <div v-memo="[count]">Count: {{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

Assume the button is clicked but count is not incremented.

A The <code>increment</code> function is not called, so no re-render happens.

B If <code>count</code> does not change, <code>v-memo</code> prevents re-render; re-render must be caused by something else.

C The <code>count</code> value is mutated but not replaced, so Vue does not detect change and re-renders anyway.

D The <code>v-memo</code> dependency array is shallow, so if <code>count</code> is a ref, changes inside it are not detected properly.

💡 Hint

Think about what triggers re-render when v-memo is used.

v-memo prevents re-render if dependencies do not change. If the element re-renders without count changing, another reactive source or parent re-render caused it.

❓ state_output

advanced

What is the output after toggling a dependency in v-memo?

Given this Vue component:

<template>
  <div v-memo="[show]">Visible: {{ show }}</div>
  <button @click="toggleShow">Toggle</button>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
function toggleShow() {
  show.value = !show.value
}
</script>

What will the div display after clicking the button twice?

A Visible: false after first click, Visible: true after second click

B Visible: true after first click, Visible: false after second click

C Visible: true both times, no re-render occurs

D Visible: false both times, re-render is blocked

💡 Hint

Each toggle changes the show value, which is a dependency of v-memo.

Since show is in the v-memo dependency array, toggling it causes the div to re-render and update its displayed value accordingly.

🧠 Conceptual

expert

Why use v-memo for conditional memoization in Vue?

Which of the following best explains the main benefit of using v-memo in Vue components?

A <code>v-memo</code> automatically caches API responses to avoid network calls.

B <code>v-memo</code> replaces Vue's reactivity system with a manual memoization approach.

C <code>v-memo</code> allows Vue to skip re-rendering parts of the template when specified reactive dependencies have not changed, improving performance.

D <code>v-memo</code> forces Vue to always re-render the component regardless of state changes.

💡 Hint

Think about how memoization helps with rendering efficiency.

v-memo helps Vue skip rendering parts of the template when dependencies are unchanged, which can reduce unnecessary work and improve app speed.

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