v-memo for conditional memoization in Vue - Performance & Optimization

Performance: v-memo for conditional memoization

MEDIUM IMPACT

Improves rendering speed by skipping updates to parts of the DOM when their dependencies haven't changed.

Optimizing a component with conditional rendering that depends on reactive data

Vue

<template>
  <div v-memo="[someReactive.value]">
    <p>{{ expensiveComputation }}</p>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const someReactive = ref(0)
const expensiveComputation = computed(() => {
  // heavy calculation
  return someReactive.value * 1000
})
</script>

v-memo skips re-rendering the div and its children unless someReactive.value changes.

📈 Performance Gainreduces re-renders and layout recalculations to only when dependencies change

Optimizing a component with conditional rendering that depends on reactive data

Vue

<template>
  <div>
    <p>{{ expensiveComputation }}</p>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const someReactive = ref(0)
const expensiveComputation = computed(() => {
  // heavy calculation
  return someReactive.value * 1000
})
</script>

The paragraph re-renders every time the parent component updates, even if the reactive data used hasn't changed.

📉 Performance Costtriggers re-render and layout recalculation on every parent update

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Without v-memo	Updates every reactive change	Triggers reflow on each update	Higher paint cost due to frequent updates	[X] Bad
With v-memo	Updates only when dependencies change	Single reflow per dependency change	Lower paint cost by skipping unnecessary updates	[OK] Good

Rendering Pipeline

v-memo hooks into Vue's rendering process to compare dependency values before patching the DOM, skipping unnecessary updates.

→Virtual DOM Diffing

→DOM Update

→Layout

⚠️ BottleneckDOM Update stage is most expensive when unnecessary updates occur

Core Web Vital Affected

INP

Improves rendering speed by skipping updates to parts of the DOM when their dependencies haven't changed.

Optimization Tips

1Always pass reactive dependencies array to v-memo for accurate memoization.

2Use v-memo on components or elements with expensive rendering logic.

3Avoid overusing v-memo on frequently changing dependencies to prevent stale UI.

Performance Quiz - 3 Questions

What does v-memo primarily optimize in Vue components?

A Reducing JavaScript bundle size

B Skipping DOM updates when dependencies haven't changed

C Improving initial page load speed

D Lazy loading images

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for fewer 'Update Layer Tree' and 'Recalculate Style' events when using v-memo.

What to look for: Reduced number of DOM updates and layout recalculations indicating skipped renders

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