Vue Academy · Lesson

Memoization Techniques

Avoid redundant computation with memoization.

Memoization Techniques is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Doing Less Work

Performance often comes from not recomputing or re-rendering things that have not changed. Vue gives you several memoization tools that cache results and skip unnecessary updates.

Computed Caching

A computed property caches its result and only recalculates when one of its reactive dependencies changes. This makes it far cheaper than a method that runs on every render.

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

Computed vs Method

A method runs every time the template re-renders, even if its inputs are identical. A computed reuses its cached value, so prefer computeds for derived data used in templates.

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

v-once for Static Content

The v-once directive renders an element a single time and then skips it on all future updates. Use it for content that never changes.

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

When to Use v-once

Apply v-once to large static sections like a footer, terms text, or a fixed header. Vue treats the rendered output as static and never re-diffs it.

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

v-memo for Expensive Lists

The v-memo directive memoizes a subtree and re-renders it only when values in its dependency array change. It shines on large lists.

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

How v-memo Works

Each item re-renders only when its memo array changes. If item.selected stays the same, Vue skips re-rendering that row entirely, even if the parent updates.

Avoiding Unnecessary Re-renders

Components re-render when their reactive data or props change. Keep components small and focused so a change in one area does not force unrelated parts to re-render.

Stable Keys in Lists

Always give v-for a stable, unique :key. Using the array index as a key can cause Vue to reuse the wrong DOM nodes and re-render more than necessary.

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

Keeping Reactive Data Minimal

Only put data in reactive state if the template depends on it. Large objects or values that never change in the UI add overhead to reactivity tracking. Use plain non-reactive variables when appropriate.

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

Memoizing Pure Functions

For pure JavaScript computations outside Vue reactivity, you can cache results in a simple map so repeated calls with the same input return instantly.

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

Quick Check

Test your knowledge of memoization.

Recap

Reduce wasted work with caching: computed properties memoize derived values, v-once renders static content a single time, and v-memo skips re-rendering subtrees in large lists. Use stable keys and keep reactive state minimal. Next you will learn to find and fix performance bottlenecks with real tools.

Frequently asked questions

Is the “Memoization Techniques” lesson free?

Yes — the full text of “Memoization Techniques” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Memoization Techniques”?

Avoid redundant computation with memoization. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Memoization Techniques” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy