v-memo for conditional memoization in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use v-memo with a single dependency.

Vue

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

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

Drag options to blanks, or click blank then click option'

A[count.value]

Bcount

Ccount.value + 1

Dcount()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the ref object directly instead of its value.

Not wrapping dependencies in an array.

The v-memo directive expects an array of dependencies. Using [count.value] tracks the reactive value correctly.

2fill in blank

medium

Complete the code to memoize a list rendering with v-memo depending on items.

Vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id" v-memo="[1]">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([{ id: 1, name: 'A' }, { id: 2, name: 'B' }])
</script>

Drag options to blanks, or click blank then click option'

A[items]

B[items.value]

Citems

Ditems.value

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the ref object without accessing .value.

Not wrapping dependencies in an array.

v-memo needs an array of reactive values. [items.value] correctly tracks the array's reactive state.

3fill in blank

hard

Fix the error in the v-memo usage to memoize based on user.name.

Vue

<template>
  <p v-memo="[1]">Hello, {{ user.name }}</p>
</template>

<script setup>
import { reactive } from 'vue'
const user = reactive({ name: 'Alice' })
</script>

Drag options to blanks, or click blank then click option'

A[user]

Buser.name

C[user.name]

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the property directly without array brackets.

Passing the entire reactive object.

v-memo requires an array of dependencies. Using [user.name] tracks changes to the name property.

4fill in blank

hard

Fill both blanks to memoize a component rendering based on count.value and status.

Vue

<template>
  <div v-memo="[[1], [2]]">Count: {{ count }}, Status: {{ status }}</div>
</template>

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

Drag options to blanks, or click blank then click option'

Acount.value

Bstatus

Ccount

D'active'

Attempts:

3 left

💡 Hint

Common Mistakes

Using count instead of count.value.

Using string literals instead of variables.

Use count.value to track the reactive count and status as a normal variable in the dependency array.

5fill in blank

hard

Fill all three blanks to memoize a list rendering with v-memo based on items.value, filter, and searchTerm.

Vue

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id" v-memo="[[1], [2], [3]]">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue'
const items = ref([{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }])
const filter = ref('all')
const searchTerm = ref('')
const filteredItems = computed(() => {
  return items.value.filter(item => {
    return (filter.value === 'all' || item.name.includes(filter.value)) &&
           item.name.toLowerCase().includes(searchTerm.value.toLowerCase())
  })
})
</script>

Drag options to blanks, or click blank then click option'

Aitems.value

Bfilter.value

CsearchTerm.value

DfilteredItems

Attempts:

3 left

💡 Hint

Common Mistakes

Using the computed property filteredItems directly in v-memo.

Not accessing .value on refs.

Memoize based on the reactive values items.value, filter.value, and searchTerm.value to update rendering correctly.

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