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

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

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

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

Контент

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

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

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

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

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

### Що таке Options API у Vue.js

**Options API** - це традиційний спосіб написання компонентів у Vue.js, при якому логіка компонента описується через об'єкт з опціями (options):
`data`, `methods`, `computed`, `watch`, `props`, `components` тощо.

Цей підхід існував з найперших версій Vue (2.x) і досі підтримується у Vue 3.

---

## Приклад компонента з Options API

```javascript
<template>
  <div>
    <p>Лічильник: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

data() {
    return {
      count: 0
    }
  },

methods: {
    increment() {
      this.count++
    }
  }
}
</script>
```

Тут компонент оголошено через об'єкт:

- `data()` повертає стан (реактивні дані);
- `methods` містить методи компонента;
- `this` вказує на екземпляр компонента.

---

## Основні "опції" Options API

| Опція | Призначення |
|---|---|
| `data()` | Повертає об'єкт з реактивними даними компонента |
| `props` | Визначає вхідні параметри від батьківського компонента |
| `methods` | Містить функції та обробники подій |
| `computed` | Обчислювані властивості (кешуються автоматично) |
| `watch` | Реакція на зміну певних даних |
| `components` | Реєстрація вкладених компонентів |
| `mounted`, `created` та ін. | Хуки життєвого циклу компонента |

---

## Приклад з кількома опціями

```javascript
<script>
export default {
  props: ['initial'],

data() {
    return {
      count: this.initial
    }
  },

computed: {
    doubled() {
      return this.count * 2
    }
  },

watch: {
    count(newVal) {
      console.log('Count змінився:', newVal)
    }
  },

methods: {
    increment() {
      this.count++
    }
  },

mounted() {
    console.log('Компонент змонтовано!')
  }
}
</script>
```

---

## Відмінність від Composition API

| Особливість | **Options API** | **Composition API** |
|---|---|---|
| Стиль | Об'єкт із секціями (`data`, `methods`, `computed`) | Логіка описується напряму в `<script setup>` або `setup()` |
| Контекст | Використовує `this` | Використовує звичайні JS-змінні |
| Гнучкість | Простіше для невеликих компонентів | Краще масштабується у великих проєктах |
| Версія Vue | Основний спосіб до Vue 3 | Новий стандарт з Vue 3 |

---

## Коли використовувати Options API

Добре підходить:

- для **невеликих компонентів**;
- якщо ви **тільки починаєте з Vue**;
- якщо проєкт створено на **Vue 2** і поступово мігрує на 3.

Менш зручно:

- коли логіка складна і розділена між багатьма опціями - код стає фрагментованим;
- коли потрібно **повторно використати** логіку між компонентами (у Composition API це простіше через composables).

---

### Підсумок

> **Options API** - це декларативний спосіб опису компонента через об'єкт з опціями (`data`, `methods`, `computed` тощо).
> Він простий в освоєнні і зручний для невеликих проєктів, але **менш гнучкий**, ніж **Composition API**, представлений у Vue 3.

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

Для рев’юера

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

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