Suggest an edit

Improve this article

Refine the answer for “What is computed()?”. 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()` is a function from the Composition API (Vue 3) that creates a **computed property**, a value that is **automatically recalculated** when its dependencies change, and **cached** until the dependencies change.

Put simply:

> `computed()` **is a reactive value that is computed from other reactive data and is "lazily" recalculated only when needed.**

This is one of the most important tools in Vue.

---

## How does computed() work?

```js
import { ref, computed } from 'vue'

const count = ref(2)

const double = computed(() => count.value * 2)
```

- `double` depends on `count`
- Vue automatically tracks the dependency
- if `count` changes -> `double` is recalculated
- if it does not change, Vue returns the **cached** value

---

## The main difference between computed and a regular function

**computed() is cached.**
A regular function is not.

Example:

```js
const total = computed(() => expensiveCalculation())
```

`expensiveCalculation()` will be called:

- **once**, until the dependent data changes
- after that the cache is returned

If this were just a function:

```js
function total() {
  return expensiveCalculation()
}
```

it would be called *every time* the template renders.

---

## Example in a component

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

const price = ref(100)
const count = ref(3)

const total = computed(() => price.value * count.value)
</script>

<template>
  <p>Total: {{ total }}</p>
</template>
```

`total` updates automatically when `price` or `count` changes.

---

## computed() can be **writable** (get + set)

```js
const firstName = ref('Alex')
const lastName = ref('Smith')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
```

Usage:

```js
fullName.value = "John Doe"
```

---

## When to use computed?

#### 1. When a value depends on other values

```
price x quantity = total
```

#### 2. For expensive calculations that should be cached

For example, sorting an array:

```js
const sorted = computed(() => items.value.sort())
```

#### 3. When you need a "virtual" field based on data

For example formatting:

```js
const formattedDate = computed(() => dayjs(date.value).format('DD.MM.YYYY'))
```

#### 4. For two-way values with get/set

For example, a fullName field composed of two parts.

---

## When should you NOT use computed?

#### If you need to perform a side effect

That is what `watch` or `watchEffect` are for.

#### If the value should not be cached

If it needs to be recalculated on every render, a method is better.

---

## computed vs watch (important for interviews)

| computed | watch |
|---|---|
| returns a value | watches a value |
| always synchronous | can be asynchronous |
| cached | not cached |
| for calculations | for side effects |

---

## Summary (great for interviews)

> `computed()` **creates a computed reactive property that automatically updates when its dependencies change and is cached until the dependencies change.**
> **It is used for derived data, expensive calculations, and virtual fields.**
> **It can have get/set for two-way logic.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.