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.