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.