PassFront
  1. PassFront
  2. База знаний
  3. Реактивность

Для чего используется Composition API во Vue?

Реактивность

Composition API — способ описывать логику компонента функциями (ref, computed, watch) внутри setup, а не опциями data, methods, computed.

Зачем он нужен

  • Логика собирается по смыслу, а не по типу опций: всё про поиск лежит рядом.
  • Переиспользование через composables — обычные функции вместо миксинов, без конфликтов имён.
  • Лучшая типизация с TypeScript.

Пример

<script setup>
import { ref, computed } from 'vue';

const query = ref('');
const items = ref(['Vue', 'React', 'Svelte']);
const filtered = computed(() =>
  items.value.filter((item) => item.toLowerCase().includes(query.value.toLowerCase())),
);
</script>

Ту же логику можно вынести в useSearch(items) и использовать в нескольких компонентах.

Когда Options API тоже нормален

Для небольших простых компонентов Options API читается не хуже. Оба подхода можно сочетать.

Коротко для собеседования

Composition API группирует логику по задачам и выносит её в переиспользуемые composables, лучше работает с TypeScript.

Подробнее: Vue — Composition API FAQ

Другие вопросы раздела