Это два способа написания компонентов Vue. Options API организует код по типу опции (data, methods, computed); Composition API организует код по логическому назначению с использованием функций как ref, и .
Это два способа написания компонентов Vue. Options API организует код по типу опции (data, methods, computed); Composition API организует код по логическому назначению с использованием функций как ref, и .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Все объединено в фиксированные группы (data, methods, computed, lifecycle). Просто и удобно для поиска, но логика одного функционала разбросана по этим группам.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
Состояние, computed, методы и lifecycle для одной функции находятся вместе, а <script setup> делает это лаконичным (нет this, нет return).
Composition API позволяет извлекать и переиспользовать stateful логику как обычные функции (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
Это чисто решает проблему переиспользования логики, что было неудобно в Options API (миксины вызывали конфликты имен и неясные источники).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (с <script setup>) — это рекомендуемый стандарт для новых проектов Vue 3, особенно с TypeScript.
Composition API — это ответ Vue 3 на организацию и переиспользование логики компонентов.
Понимание того, что она группирует код по функционалу (а не по типу опции) и обеспечивает composables — в отличие от option-based групп Options API — объясняет современный стиль Vue и почему сложные компоненты и кодовые базы с TypeScript ее предпочитают.
Оба подхода полностью поддерживаются; вы можете даже их смешивать.