Options API и Composition API
↑ 4.1 Vue 3: основы, компоненты, Composition API · ← Предыдущая · → Следующая
Зачем это на собесе
Ждут аргументированного сравнения: почему Composition API стал рекомендуемым.
Объяснение
Options API: код организован по опциям data, methods, computed, watch, хуки.
export default {
props: { userId: Number },
data: () => ({ user: null, loading: false }),
computed: { fullName() { return `${this.user?.first} ${this.user?.last}`; } },
watch: { userId: { immediate: true, handler: "load" } },
methods: { async load() { this.loading = true; this.user = await api.user(this.userId); this.loading = false; } },
mounted() { /* ... */ },
};Composition API (setup/<script setup>): логика группируется по смыслу и выносится в функции (composables).
<script setup lang="ts">
const props = defineProps<{ userId: number }>();
const { user, loading } = useUser(() => props.userId); // вся логика в одном composable
const fullName = computed(() => `${user.value?.first} ${user.value?.last}`);
</script>| Критерий | Options API | Composition API |
|---|---|---|
| Организация | по типам опций | по логическим задачам |
| Переиспользование | миксины (конфликты имён, неявные источники) | composables (явные, типизируемые) |
| TypeScript | ограниченно | отлично |
| Порог входа | ниже | выше (реактивность ref) |
this | есть | нет |
| Размер бандла | чуть больше | лучше tree-shaking и минификация |
| Крупные компоненты | «размазывается» по опциям | компактнее |
Можно смешивать в рамках одного компонента (setup() + опции). Для новых проектов — <script setup>.
Причины появления Composition API: ограничения миксинов, слабая типизация, разрозненность логики в больших компонентах.
Нюансы и подводные камни
- Composition API не «лучше во всём»: для простых компонентов Options API читаем.
- Не превращайте
setupв свалку: выносите логику в composables. - Реактивность
refтребует.valueв скрипте (в шаблоне разворачивается). - В миграции Vue 2 → 3 Options API продолжает работать.
Практика
- Перепишите компонент с Options API на
<script setup>. - Вынесите повторяющуюся логику двух компонентов в composable.
- Сравните TS-поддержку в обоих подходах.
Вопросы с ответами
Зачем Composition API?
Организация кода по смыслу, лучшее переиспользование (composables вместо миксинов) и типизация.
Чем composable лучше mixin?
Явные зависимости и возвращаемые значения, нет конфликтов имён, легко типизировать.