Këto janë dy mënyra për të shkruar komponentë Vue. Options API organizon kodin sipas llojit të opsionit (data, methods, computed); Composition API organizon kodin sipas shqetësimeve logjike duke përdorur funksione si , dhe .
Këto janë dy mënyra për të shkruar komponentë Vue. Options API organizon kodin sipas llojit të opsionit (data, methods, computed); Composition API organizon kodin sipas shqetësimeve logjike duke përdorur funksione si , dhe .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Everything is grouped into fixed buckets (data, methods, computed, lifecycle). E thjeshtë dhe e zbulushme, por logjika e një feature-i shpërndahet në ato kova.
<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>
Gjendja, computed, metodat dhe lifecycle për një shqetësim flenë bashkë, dhe <script setup> e bën këtë konciz (pa this, pa return).
Composition API ju lejon të ekstraktoni dhe ripërdorni logjikën me gjendje si funksione të zakonshme (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>
Kjo zgjidh në mënyrë të pastër ripërdorimin e logjikës, e cila ishte e vështirë në Options API (mixins kishin përplasje emrash dhe burime të paqarta).
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 (me <script setup>) është parazgjedhja e rekomanduar për projektet e reja Vue 3, veçanërisht me TypeScript.
Composition API është përgjigja e Vue 3 për organizimin dhe ripërdorimin e logjikës së komponentit.
Kuptimi se ajo grupet kodin sipas feature-it (jo sipas llojit të opsionit) dhe mundëson composables — në krahasim me kovat e bazuara në opsione të Options API — shpjegon stilin modern Vue dhe përse komponentet komplekse dhe codebase-t TypeScript e favorizojnë atë.
Të dyja mbështeten plotësisht; madje mund t'i përzierni.