To sta dva načina za pisanje Vue komponent. Options API organizira kodo po tipu opcije (data, methods, computed); Composition API organizira kodo po logičnih skrbeh s pomočjo funkcij kot so ref, in .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Vse je razvrščeno v fiksne razrede (data, methods, computed, lifecycle). Enostavno in odkrivno, vendar je logika ene lastnosti razpršena po teh razredih.
<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>
Stanje, computed, metode in lifecycle za eno skrb sedijo skupaj, in <script setup> naredi to jedrnato (brez this, brez return).
Composition API vam omogoči ekstrakcijo in ponovno uporabo stavne logike kot navadne funkcije (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 čisto reši ponovno uporabo logike, kar je bilo v Options API nerodno (mixins so imeli trke imen in nejasne vire).
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 priporočena privzeta možnost za nove Vue 3 projekte, posebej s TypeScriptom.
Composition API je odgovor Vue 3 na organizacijo in ponovno uporabo logike komponente.
Razumevanje, da grupira kodo po lastnosti (ne po tipu opcije) in omogoča composables — v primerjavi s korpajoči Options API na osnovi opcij — pojasnjuje sodobni Vue slog in zakaj kompleksne komponente in TypeScript codebases to sprejemajo.
Oboje je v celoti podprto; lahko jih celo mešate.