Загрузка…
Контекст
Options API — классический способ описывать компонент через объект опций: data, methods, computed, watch, lifecycle-хуки. Долго был основным стилем в Vue 2 и до сих пор полностью поддерживается в Vue 3.
Как выглядит
export default {
data() {
return { count: 0 }
},
computed: {
double() {
return this.count * 2
},
},
methods: {
inc() {
this.count++
},
},
mounted() {
console.log('mounted', this.count)
},
}Логика «раскладывается» по типу опции: состояние — в data, производные значения — в computed, побочные эффекты — в watch/mounted. Контекст доступа — this.
Плюсы и минусы
Плюсы: понятная структура для новичков, много учебных материалов, удобно для небольших компонентов. Минусы: связанная логика одной фичи размазана по разным опциям; сложнее переиспользовать куски без mixins (у mixins свои минусы: конфликты имён, неочевидный источник).
В Vue 3 рядом живёт Composition API; часто в одном проекте допускают оба стиля, но для новой логики чаще выбирают <script setup>.
Итог
Options API — компонентный объект с опциями и this. Это не «устаревший мусор», а валидный стиль; на интервью полезно сравнить его с Composition API по переиспользованию логики.