v-memo for conditional memoization in Vue - Mini Project: Build & Apply

Using <code>v-memo</code> for Conditional Memoization in Vue

📖 Scenario: You are building a simple Vue 3 app that shows a list of tasks with their completion status. You want to optimize rendering so that the task list only re-renders when the tasks actually change, not when unrelated state updates.

🎯 Goal: Build a Vue component that uses v-memo to memoize the task list rendering conditionally based on the tasks array. This will prevent unnecessary re-renders when other state changes.

📋 What You'll Learn

Create a reactive array called tasks with 3 tasks and their done status

Create a reactive boolean called showCompleted to filter tasks

Use v-memo with a dependency array containing tasks to memoize the task list rendering

Add a button to toggle showCompleted and conditionally show completed tasks

💡 Why This Matters

🌍 Real World

Optimizing Vue apps to avoid unnecessary re-renders improves performance and user experience, especially in large lists or complex UIs.

💼 Career

Understanding memoization techniques like <code>v-memo</code> is valuable for frontend developers working with Vue to build efficient, scalable applications.

1

Setup the tasks data

Create a reactive array called tasks with these exact objects: { id: 1, title: 'Buy groceries', done: false }, { id: 2, title: 'Clean house', done: true }, and { id: 3, title: 'Read book', done: false } inside the setup() function.

Vue

// Create reactive array tasks with 3 task objects
// Your code here

Hint

Use ref from Vue to create a reactive array named tasks with the given objects.

2

Add a reactive filter variable

Inside the setup() function, create a reactive boolean called showCompleted and set it to false.

Vue

import { ref } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', done: false },
  { id: 2, title: 'Clean house', done: true },
  { id: 3, title: 'Read book', done: false }
])

// Create reactive boolean showCompleted set to false
// Your code here

Hint

Use ref(false) to create showCompleted as a reactive boolean.

3

Use v-memo to memoize the task list rendering

In the template, use v-memo with a dependency array containing tasks to memoize the rendering of the filtered task list. Use v-for to loop over tasks.value.filter(task => showCompleted.value || !task.done) and display each task's title and done status.

Vue

import { ref } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', done: false },
  { id: 2, title: 'Clean house', done: true },
  { id: 3, title: 'Read book', done: false }
])

const showCompleted = ref(false)



  
  

Hint

Use v-memo="[tasks]" on the <ul> element and loop with v-for over the filtered tasks.

4

Add a button to toggle showCompleted

Add a button above the task list that toggles the showCompleted boolean when clicked. Use @click with a function that sets showCompleted.value = !showCompleted.value. The button text should be Show Completed when showCompleted.value is false, and Hide Completed when true.

Vue

import { ref } from 'vue'

const tasks = ref([
  { id: 1, title: 'Buy groceries', done: false },
  { id: 2, title: 'Clean house', done: true },
  { id: 3, title: 'Read book', done: false }
])

const showCompleted = ref(false)



  
  

  
     showCompleted.value || !task.done)" :key="task.id">
      {{ task.title }} - {{ task.done ? 'Done' : 'Pending' }}
    
  

Hint

Add a button with @click that toggles showCompleted.value and updates the button text accordingly.

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