Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке computed()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`computed()` - це функція з Composition API (Vue 3), яка створює **обчислювану властивість** (*computed property*) - значення, яке **автоматично перераховується**, коли змінюються його залежності, і **кешується**, поки залежності не зміняться.

Простіше кажучи:

> `computed()` **- це реактивне значення, яке обчислюється на основі інших реактивних даних і "ліниво" перераховується тільки за потреби.**

Це один з найважливіших інструментів Vue.

---

## Як працює computed()?

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

const count = ref(2)

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

- `double` залежить від `count`
- Vue автоматично відстежує залежність
- якщо `count` зміниться -> `double` перерахується
- якщо не змінюється - Vue повертає **кешоване** значення

---

## Головна відмінність computed від звичайної функції

**computed() кешується.**
Звичайна функція - ні.

Приклад:

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

`expensiveCalculation()` буде викликана:

- **один раз**, поки залежні дані не зміняться
- потім повертається кеш

Якби це була просто функція:

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

- вона б викликалася *щоразу* при рендері шаблону.

---

## Приклад у компоненті

```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 }}</p>
</template>
```

`total` оновиться автоматично при зміні `price` або `count`.

---

## computed() може бути **змінюваним** (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(' ')
  }
})
```

Використання:

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

---

## Коли використовувати computed?

#### 1. Коли значення залежить від інших значень

```
ціна x кількість = разом
```

#### 2. Для складних обчислень, які повинні кешуватися

Наприклад сортування масиву:

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

#### 3. Коли потрібне "віртуальне" поле на основі даних

Наприклад форматування:

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

#### 4. Для двосторонніх значень з get/set

Наприклад поле fullName, складене з двох частин.

---

## Коли НЕ потрібно використовувати computed?

#### Якщо потрібно виконати побічний ефект

Для цього є `watch` або `watchEffect`.

#### Якщо значення не повинно кешуватися

Якщо потрібно перераховувати на кожен рендер - краще метод.

---

## computed vs watch (важливо для співбесід)

| computed | watch |
|---|---|
| повертає значення | стежить за значенням |
| завжди синхронний | може бути асинхронним |
| кешується | не кешується |
| для обчислень | для побічних ефектів |

---

## Підсумок (ідеально для співбесіди)

> `computed()` **створює обчислювану реактивну властивість, яка автоматично оновлюється при зміні залежностей і кешується, поки залежності не змінюються.**
> **Використовується для похідних даних, складних обчислень і віртуальних полів.**
> **Може бути з get/set для двосторонньої логіки.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати452 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.