Чи можна змішувати Options API і Composition API?
Так, змішувати Options API і Composition API можна, і це повністю підтримується Vue 3. Такий підхід називають hybrid approach - змішаний стиль написання компонента.
Vue 3 спеціально зберігає Options API, щоб:
- забезпечити плавну міграцію з Vue 2,
- дати розробникам можливість поєднувати обидва стилі там, де це зручно.
Як виглядає змішаний компонент
<script>
import { ref, onMounted } from 'vue'
export default {
data() {
return {
title: 'Options API'
}
},
setup() {
const count = ref(0)
onMounted(() => {
console.log('mounted (Composition API)')
})
return { count }
},
mounted() {
console.log('mounted (Options API)')
}
}
</script>
<template>
<h1>{{ title }}</h1>
<p>Count: {{ count }}</p>
</template>Працює без проблем. Значення з setup доступні в шаблоні. Хуки обох API викликаються.
ВАЖЛИВІ МОМЕНТИ
1. setup() виконується раніше, ніж хуки Options API
Порядок виклику:
- setup()
- beforeCreate
- created
- beforeMount
- mounted
2. Значення з setup НЕ доступні через this
В Options API:
mounted() {
console.log(this.count) // undefined
}У шаблоні - доступно
У setup - доступно
У this - ні
Тому що Composition API не використовує this.
3. Можна змішувати, але краще робити це усвідомлено
Коли змішувати - добре:
- міграція з Vue 2 на Vue 3
- компонент занадто великий, щоб одразу переписати
- частина логіки простіша на Options API, частина - на Composition API
Коли змішувати - погано:
- новий компонент
- логіка стає заплутаною
- частина логіки в setup, частина - в data/methods → хаос
Команда Vue рекомендує:
нові компоненти писати повністю на Composition API, а змішувати - лише за потреби.
Підсумок (ідеально для співбесіди)
Так, Vue 3 дозволяє змішувати Options API і Composition API в одному компоненті.
setup()викликається першим, значення з setup не доступні черезthis, але доступні в шаблоні. Змішування використовується під час міграції та поступового переходу, але в нових компонентах кращий вибір - Composition API.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.