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

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

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

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

Контент

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

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

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

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

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

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

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

- **computed - це «розумні змінні», які самі оновлюються, коли потрібно.**

---

## Простий приклад

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

const firstName = ref("Tim")
const lastName = ref("Petrov")

// обчислювана властивість
const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})
</script>

<template>
  <p>{{ fullName }}</p>
</template>
```

Коли змінюється `firstName` або `lastName` -> `fullName` перераховується автоматично.

---

## Основні властивості computed

### 1) **Автоматично перераховується**

Якщо залежні дані змінилися - computed оновиться.

### 2) **Кешується**

Якщо залежності не змінювалися, Vue **не перераховує** значення повторно.

Це економить ресурси й робить застосунок швидшим.

Приклад

```javascript
const double = computed(() => {
  console.log("перерахунок")
  return count.value * 2
})
```

Якщо UI 5 разів звернеться до `double`, але `count` НЕ змінився -> лог виведеться один раз.

---

## Computed vs methods

| Що | computed | methods |
|---|---|---|
| Кешування | Так | Ні |
| Викликається | При зміні залежностей | Щоразу під час рендеру |
| Використання | Для derived state | Для дій / логіки |

Приклад, де computed кращий:

```javascript
<p>{{ expensiveCalculation }}</p>
```

Якби це був method - він виконувався б при кожному перемальовуванні, що повільно.

---

## Як оголошуються computed у Composition API?

```javascript
const sum = computed(() => a.value + b.value)
```

В Options API:

```javascript
computed: {
  sum() {
    return this.a + this.b
  }
}
```

---

## Двонаправлені обчислювані властивості (getter + setter)

Computed може мати **і get, і set**:

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

const name = ref("Tim")

const formattedName = computed({
  get() {
    return name.value.toUpperCase()
  },
  set(newValue) {
    name.value = newValue.toLowerCase()
  }
})
</script>
```

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

```javascript
<input v-model="formattedName" />
```

---

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

#### Використовуй computed, якщо:

- значення залежить від іншого стану
- це derived state (похідне значення)
- важлива продуктивність
- значення потрібне в шаблоні

Приклади:

- відфільтрований список товарів
- форматування дати
- підрахована кількість елементів
- повноцінні вирази замість логіки в шаблоні

---

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

- коли потрібно виконати дію (виклик API, логіка, побічні ефекти)
- коли значення не залежить від реактивних даних
- коли кеш не потрібен (використовуй method)

---

## Підсумок (коротко)

**Computed - це реактивні, кешовані властивості, які автоматично перераховуються при зміні залежностей.**

Вони:

- схожі на функції,
- але працюють як змінні,
- оптимізовані (кешуються),
- автоматично оновлюються.

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

Для рев’юера

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

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