Jedná se o dva způsoby, jak psát Vue komponenty. Options API organizuje kód podle typu opce (data, methods, computed); Composition API organizuje kód podle logické části pomocí funkcí jako ref, a .
Jedná se o dva způsoby, jak psát Vue komponenty. Options API organizuje kód podle typu opce (data, methods, computed); Composition API organizuje kód podle logické části pomocí funkcí jako ref, a .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Všechno je seskupeno do pevných kategorií (data, methods, computed, lifecycle). Jednoduché a snadno se v tom vyzná, ale logika jednoho prvku je rozptýlena mezi tyto kategorie.
<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>
Stav, computed, metody a lifecycle pro jednu část jsou pohromadě, a <script setup> to dělá stručné (bez this, bez return).
Composition API vám umožňuje extrahovat a znovupoužít stavovou logiku jako prosté funkce (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 čistě řeší opětovné použití logiky, což bylo v Options API nepohodlné (mixins měly kolize názvů a nejasné zdroje).
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 (s <script setup>) je doporučena jako výchozí pro nové Vue 3 projekty, zejména s TypeScript.
Composition API je odpověď Vue 3 na organizaci a opětovné použití logiky komponenty.
Pochopení toho, že organizuje kód podle prvku (ne podle typu opce) a umožňuje composables — versus option-based kategorie Options API — vysvětluje moderní Vue styl a proč jej preferují komplexní komponenty a TypeScript kódové základy.
Oba způsoby jsou plně podporovány; můžete je dokonce mísit.