v-memo for conditional memoization in Vue

Introduction

v-memo helps Vue remember parts of your template so it doesn't redo work when it doesn't need to. This makes your app faster by skipping repeated work.

When you have a big list and only some items change, so you want to skip re-rendering unchanged items.

When you want to avoid expensive calculations or DOM updates unless certain data changes.

When you want to improve performance in a component that updates often but only parts of it depend on some data.

When you want to control exactly when Vue should update a part of your template based on specific conditions.

Syntax

Vue

<template>
  <div v-memo="[condition1, condition2]">
    <!-- content that updates only if conditions change -->
  </div>
</template>

The v-memo directive takes an array of values to watch.

Vue skips re-rendering the element if these values do not change.

Examples

This paragraph only updates when count changes.

Vue

<template>
  <p v-memo="[count]">Count is {{ count }}</p>
</template>

Each list item only re-renders if its item.value changes.

Vue

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

This block updates only if user.name or user.age changes.

Vue

<template>
  <div v-memo="[user.name, user.age]">
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

Sample Program

Here, the paragraph showing count uses v-memo with [count]. It only re-renders when count changes. The name paragraph updates normally.

Clicking 'Increment Count' updates the count and re-renders the count paragraph only. Clicking 'Change Name' updates the name but does not re-render the count paragraph.

Vue

<template>
  <div>
    <button @click="incrementCount">Increment Count</button>
    <button @click="changeName">Change Name</button>

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

<script setup>
import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')

function incrementCount() {
  count.value++
}

function changeName() {
  name.value = name.value === 'Alice' ? 'Bob' : 'Alice'
}
</script>

Important Notes

Time complexity: Using v-memo reduces unnecessary re-renders, improving performance especially in large or complex templates.

Space complexity: Minimal extra memory is used to track the memoized values.

A common mistake is not including all relevant reactive values in the v-memo array, causing stale or incorrect UI.

Use v-memo when you want fine control over updates. For simple cases, Vue's normal reactivity is enough.

Summary

v-memo helps Vue skip re-rendering parts of the template when certain values don't change.

It takes an array of values to watch and only updates if these change.

This improves performance by avoiding unnecessary work.

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