How to Use v-memo for Performance Optimization in Vue

Use the v-memo directive in Vue to memoize parts of your template and skip unnecessary re-renders when dependencies don't change. It accepts an array of reactive dependencies, and Vue will only re-render the memoized block if these dependencies change, improving performance.

Syntax

The v-memo directive takes an array of dependencies that Vue watches. When none of these dependencies change, Vue skips re-rendering the memoized block.

Syntax parts:

• v-memo="[dep1, dep2, ...]": List of reactive values to watch.
• The block inside v-memo is memoized and only updates if dependencies change.

vue

<template>
  <div v-memo="[count, user.name]">
    <!-- This block re-renders only if count or user.name changes -->
    <p>Count: {{ count }}</p>
    <p>User: {{ user.name }}</p>
  </div>
</template>

Example

This example shows a counter and a user name displayed inside a v-memo block. The block only re-renders when count or user.name changes, skipping updates when unrelated state changes.

vue

<template>
  <div>
    <button @click="increment">Increment Count</button>
    <button @click="changeAge">Change Age (unrelated)</button>

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

    <p>User Age: {{ user.age }}</p>
  </div>
</template>

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

const count = ref(0)
const user = reactive({ name: 'Alice', age: 25 })

function increment() {
  count.value++
}

function changeAge() {
  user.age++
}
</script>

Output

Buttons to increment count and change age. The displayed count and user name update only when their values change. The user age updates independently.

Common Pitfalls

Common mistakes when using v-memo include:

• Not listing all reactive dependencies inside the array, causing stale or incorrect UI.
• Using complex objects without specifying exact reactive properties, leading to unnecessary re-renders.
• Trying to memoize large blocks without clear dependency tracking, which can cause bugs.

Always list exactly the reactive values that affect the memoized block.

vue

<template>
  <!-- Wrong: missing user.name in dependencies -->
  <div v-memo="[count]">
    <p>Count: {{ count }}</p>
    <p>User Name: {{ user.name }}</p> <!-- This won't update properly -->
  </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:

Feature	Description
v-memo	Directive to memoize a template block
Dependencies Array	List reactive values to watch for changes
Re-render	Block re-renders only if dependencies change
Use Case	Optimize expensive or large template parts
Common Mistake	Omitting dependencies causes stale UI

Key Takeaways

Use v-memo to memoize template blocks and improve rendering performance.

Always list all reactive dependencies that affect the memoized block inside the v-memo array.

Memoized blocks skip re-rendering if dependencies do not change, saving CPU and improving speed.

Avoid using v-memo without proper dependencies to prevent stale or incorrect UI updates.

Ideal for optimizing parts of your Vue template that are expensive to render or rarely change.