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.