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

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

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

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

Контент

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

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

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

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

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

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

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

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

Це один з ключових інструментів реактивності у Vue.

---

## Приклад обчислюваної властивості (Options API)

```js
computed: {
  double() {
    return this.count * 2
  }
}
```

Якщо `this.count` змінюється - Vue перерахує `double`.

Якщо ні - поверне закешоване значення.

---

## Приклад обчислюваної властивості (Composition API)

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

const count = ref(2)

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

---

## Головна відмінність computed від methods

#### methods - викликаються щоразу, при кожному рендері

#### computed - викликаються тільки при зміні залежностей (кешуються)

Приклад:

```html
<p>{{ heavyCalculation() }}</p> 
<p>{{ heavyValue }}</p>        
```

`heavyValue` - computed:

```js
const heavyValue = computed(() => heavyCalculation())
```

---

## Коли використовувати обчислювані властивості?

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

Наприклад:

- підсумок замовлення: `price * quantity`
- фільтрація списку
- форматування даних
- перетворення рядків/дат

#### 2. Щоб кешувати результати дорогих операцій

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

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

#### 3. Коли потрібна "віртуальна властивість" об'єкта

Наприклад:

```js
fullName = firstName + " " + lastName
```

---

## Computed з getter/setter

Обчислювані властивості можуть бути **двосторонніми**:

```js
const fullName = computed({
  get() {
    return firstName.value + " " + lastName.value
  },
  set(value) {
    [firstName.value, lastName.value] = value.split(" ")
  }
})
```

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

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

---

## Як працює computed під капотом?

1. Vue відстежує залежності, які використовуються всередині функції.
2. Якщо будь-яка із залежностей змінилася → computed перераховується.
3. Якщо ні → повертається кеш.

---

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

#### Коли потрібно виконати дію (side-effect)

Тоді потрібен **watch**.

#### Коли потрібно викликати функцію з аргументами

Computed не приймає аргументи → використовуйте метод.

---

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

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

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

Для рев’юера

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

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