To są dwa sposoby na pisanie komponentów Vue. Options API organizuje kod według typu opcji (data, methods, computed); Composition API organizuje kod według logicznego zagadnienia używając funkcji takich jak , i .
To są dwa sposoby na pisanie komponentów Vue. Options API organizuje kod według typu opcji (data, methods, computed); Composition API organizuje kod według logicznego zagadnienia używając funkcji takich jak , i .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Wszystko jest pogrupowane w ustalone kategorii (data, methods, computed, lifecycle). Jest to proste i łatwe do odkrycia, ale logika pojedynczej funkcjonalności rozsypuje się po tych kategoriach.
<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>
Stan, computed, metody i lifecycle dla jednego zagadnienia siedzi razem, a <script setup> czyni to zwięzłe (bez this, bez return).
Composition API pozwala ci wyodrębnić i ponownie użyć stanową logikę jako zwykłe funkcje (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>
To czystо rozwiązuje problem ponownego użycia logiki, który był nieporęczny w Options API (mixins miały kolizje nazw i niejasne źródła).
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 (z <script setup>) jest zalecanym domyślnym wyborem dla nowych projektów Vue 3, szczególnie z TypeScriptem.
Composition API jest odpowiedzią Vue 3 na organizowanie i ponowne użycie logiki komponentu.
Zrozumienie, że grupuje kod według funkcjonalności (nie według typu opcji) i umożliwia composables — w porównaniu z opcjami Options API opartymi na kategoriach — wyjaśnia nowoczesny styl Vue i dlaczego złożone komponenty i bazy kodów TypeScript je preferują.
Obydwa są w pełni obsługiwane; możesz je nawet mieszać.