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