PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Чем Composition API отличается от Options API?

Компоненты

Options API группирует код по типам (data, methods, computed), Composition API — по логике, внутри функции setup.

Options API

export default {
  data: () => ({ count: 0 }),
  computed: { double() { return this.count * 2; } },
  methods: { inc() { this.count += 1; } },
};

Composition API (script setup)

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

const count = ref(0);
const double = computed(() => count.value * 2);
const inc = () => { count.value += 1; };
</script>

Преимущества Composition API

  • Код одной функциональности лежит рядом, а не разбросан по секциям.
  • Логику легко вынести в переиспользуемые функции (composables), а в Options API для этого были mixins с конфликтами имён.
  • Лучшая поддержка TypeScript, нет this.
  • Меньше размер бандла при минификации.

Совместимость

Оба стиля работают во Vue 3, их можно сочетать. Для новых проектов рекомендуют <script setup>.

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

Composition API группирует код по задачам и заменяет mixins composables. Options API проще для новичков и остаётся рабочим.

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