Suggest an edit

Improve this article

Refine the answer for “Why is computed essentially a memoized getter?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`computed` in Vue is **essentially a memoized getter**, because it:

1. **has a computing function (getter)**
2. **caches the result**
3. **recalculates the value only when its dependencies change**

In other words, it doesn't work like a plain function but like a **memoized** one, tracking reactive sources.

Let's break it down point by point.

---

## 1. computed has a *get function*

When you write:

```js
const fullName = computed(() => user.first + ' ' + user.last)
```

You're essentially defining a **getter**:

- it doesn't store anything by itself
- it *computes* a value when accessed
- it's tied to reactive dependencies (`user.first`, `user.last`)

---

## 2. computed caches the result (memoization)

The first time computed is called, Vue:

1) computes the value,
2) stores it inside the computed object,
3) does *not call the computing function again* until the dependencies change.

So the next render does NOT call the function again.

Check it:

```js
const count = ref(0)
const doubled = computed(() => {
  console.log('computed recalculated')
  return count.value * 2
})

doubled.value   // logs: "computed recalculated"
doubled.value   // nothing is logged - it comes from the cache!
```

---

## 3. computed recalculates only when its dependencies change

Vue automatically tracks the reactive dependencies inside the getter.

If a dependent variable changes:

```js
count.value++
```

then computed:

- gets marked as "dirty"
- the getter runs again on the next access

This is classic memoization:
**recalculate only if the arguments changed**.

---

## 4. computed updates lazily (lazy evaluation)

This is an important part of memoization.

Computed does NOT recalculate immediately when a dependency changes.
It recalculates only when someone accesses `.value`.

For example:

```js
count.value++
```

does not trigger a recalculation.
But:

```js
doubled.value
```

does trigger a recalculation (if the dependency changed).

---

## 5. computed behaves like a "self-invalidating cache"

This is the most precise definition:

> **computed is a cached getter that automatically invalidates itself when its dependencies change.**

In other words:

- there's a cache
- there's a dependency
- there's an automatic check
- there's a recalculation when needed

Markdown · drag & drop images · ⌘B / ⌘I shortcuts347 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.