Ova dva pristupa omogućavaju pisanje Vue komponenti. Options API organizira kod po vrsti opcije (data, methods, computed); Composition API organizira kod po logičkim domenama koristeći funkcije poput ref, i .
Ova dva pristupa omogućavaju pisanje Vue komponenti. Options API organizira kod po vrsti opcije (data, methods, computed); Composition API organizira kod po logičkim domenama koristeći funkcije poput ref, i .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Svega se grupira u fiksne kategorije (data, methods, computed, lifecycle). Jednostavno je i lako se pronalazi, ali logika jedne osobine biva razpršena kroz te kategorije.
<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 vrijednosti, metode i lifecycle za jednu domenu se nalaze zajedno, a <script setup> čini to sažeto (nema this, nema return).
Composition API vam omogućava izdvajanje i ponovno korištenje logike sa stanjem kao obične 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>
Ovo čisto rješava ponovno korištenje logike, što je bilo nezgodno u Options API-ju (mixins je imao sudaranja imena i nejasne izvore).
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 preporučena zadana vrijednost za nove Vue 3 projekte, osobito s TypeScriptom.
Composition API je Vue 3-ov odgovor na organizaciju i ponovno korištenje logike komponenti.
Razumijevanje da on grupira kod po osobini (a ne po vrsti opcije) i omogućava composables — za razliku od Options API-jeve organizacije po opcijama — objašnjava moderni Vue stil i zašto kompleksne komponente i TypeScript baze koda to preferiraju.
Obojica su u potpunosti podržani; možete ih čak i miješati.