Skip to main content

Що таке Options API?

VueJunior~1 хв читання
Запропонувати правку

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 або розповісти, коли який підхід краще використовувати.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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