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

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

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

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

Контент

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

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

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

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

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

**Options API** - це традиційний спосіб написання компонентів у Vue (використовувався за замовчуванням у Vue 2 і доступний у Vue 3).
У цьому підході вся логіка компонента розділена по **опціях**:

- `data`
- `methods`
- `computed`
- `watch`
- `props`
- `mounted`, `created` та інші хуки
- `components`
- `filters` (у Vue 2)
- тощо

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

> **Options API - це спосіб оголошувати компонент, де кожен тип логіки поміщається у свій блок.**

---

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

```vue
<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

computed: {
    double() {
      return this.counter * 2
    }
  },

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

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

<template>
  <button @click="increment">Count: {{ counter }} (x2: {{ double }})</button>
</template>
```

---

## Основна ідея Options API

Весь код компонента розділено **за типом**, а не за функціональністю:

- у `data()` - лише дані
- у `methods` - методи
- у `computed` - обчислювані властивості
- у `watch` - спостерігачі
- у `mounted` - код при монтуванні

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

---

## Переваги Options API

### Підходить для новачків

Логіка структурована "по поличках".

### Чудово підходить для невеликих компонентів

Простий, зрозумілий і читабельний підхід.

### Легко читати, коли компонент маленький

Тому що все перебуває в очікуваних місцях.

### Сумісний з Vue 3

Options API повністю підтримується у Vue 3.

---

## Недоліки Options API (чому придумали Composition API)

### Логіка розмазується по різних розділах

Коли компонент стає великим, робота з ним ускладнюється.

### Погано підходить для повторного використання логіки

Доводилося використовувати міксини → вони давали:

- конфлікти імен
- приховану магію
- погану читабельність

### Важче організовувати складні компоненти

Потрібно стрибати по файлу між data/methods/computed/watch/mounted…

---

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

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

---

Якщо хочеш, можу дати порівняння Options API vs Composition API або розповісти, коли який підхід краще використовувати.

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

Для рев’юера

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

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