Що таке Options API?
Що таке 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>
<script>
export default {
name: 'Counter',
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.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.