How to Use v-memo in Vue for Performance Optimization

Use the v-memo directive in Vue to memoize a block of template code based on reactive dependencies. It skips re-rendering the block unless the specified dependencies change, improving performance by avoiding unnecessary updates.

Syntax

The v-memo directive takes an array of reactive dependencies. Vue will only re-render the block if any of these dependencies change.

Syntax parts:

• v-memo="[dep1, dep2, ...]": List dependencies to watch.
• The block inside v-memo is memoized and skipped if dependencies are unchanged.

vue

<template>
  <div v-memo="[count, user.name]">
    <!-- content that only updates when count or user.name changes -->
  </div>
</template>

Example

This example shows a counter and a user name. The block with v-memo only re-renders when count or user.name changes, skipping updates if other reactive data changes.

vue

<template>
  <div>
    <button @click="count++">Increment Count</button>
    <button @click="toggleFlag">Toggle Flag</button>
    <p>Flag: {{ flag }}</p>

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

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

const count = ref(0)
const flag = ref(true)
const user = reactive({ name: 'Alice' })

function toggleFlag() {
  flag.value = !flag.value
}
</script>

Output

Buttons to increment count and toggle flag. The count and user name text updates only when count or user.name changes, not when flag toggles.

Common Pitfalls

Common mistakes when using v-memo include:

• Not listing all reactive dependencies, causing stale UI because Vue skips updates.
• Using non-reactive values in dependencies, which won't trigger updates.
• Overusing v-memo on small or cheap-to-render blocks, which can add unnecessary complexity.

vue

<template>
  <!-- Wrong: missing user.name in dependencies -->
  <div v-memo="[count]">
    <p>Count: {{ count }}</p>
    <p>User Name: {{ user.name }}</p> <!-- won't update when user.name changes -->
  </div>

  <!-- Right: include all reactive dependencies -->
  <div v-memo="[count, user.name]">
    <p>Count: {{ count }}</p>
    <p>User Name: {{ user.name }}</p>
  </div>
</template>

Quick Reference

v-memo Cheat Sheet:

• v-memo="[deps]": Memoize block based on reactive dependencies.
• Only re-renders if any dependency changes.
• Use for expensive or large template parts.
• List all reactive values used inside the block.
• Works with Vue 3.3+.

Key Takeaways

Use v-memo to skip re-rendering template blocks when dependencies don't change.

Always list all reactive dependencies inside the v-memo array to avoid stale UI.

v-memo is best for optimizing expensive or large template sections.

It requires Vue 3.3 or newer to work.

Avoid overusing v-memo on simple or cheap-to-render parts.