Dawn huma zewg modi biex tikteb komponenti Vue. Il-Options API torganizza l-kod skont tip ta' opsjoni (data, methods, computed); il-Composition API torganizza l-kod skont ħawwa loġika billi tuża funzjonijiet bħal , , u .
Dawn huma zewg modi biex tikteb komponenti Vue. Il-Options API torganizza l-kod skont tip ta' opsjoni (data, methods, computed); il-Composition API torganizza l-kod skont ħawwa loġika billi tuża funzjonijiet bħal , , u .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Kull ħaġa hija miġbura f'kontenituri fissi (data, methods, computed, lifecycle). Sempliċi u individuabbli, iżda l-loġika ta' karatteristika waħda hija mifruxa fuq dawk il-kontenituri.
<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>
L-istatus, computed, methods, u lifecycle għal ħawwa waħda jieqfu flimkien, u <script setup> jagħmilha kumpatta (ebda this, ebda return).
Il-Composition API tippermettik teffrazza u tuża mill-ġdid il-loġika stateful bħala funzjonijiet sempliċi (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>
Dan jsolvi b'mod ċar ir-riużu tal-loġika, li kien awkward fil-Options API (il-mixins kellhom kolliżjonijiet ta' ismijiet u sorgenti mhux ċari).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Il-Composition API (<script setup> flimkien) hija l-default rakkomandata għall-proġetti Vue 3 ġodda, speċjalment b'TypeScript.
Il-Composition API hija r-risposta ta' Vue 3 biex torganizza u tuża mill-ġdid il-loġika tal-komponenti.
L-għarfien li torganizza l-kod skont il-karatteristika (mhux skont tip ta' opsjoni) u tippermetti composables — relattiv mal-kontenituri bbażati fuq opsjonijiet tal-Options API — jispjega l-istil Vue modern u għaliex il-komponenti kumplessi u l-bażi ta' kodiċi TypeScript jippreferuxu.
It-tnejn huma appoġġjati kompletament; anke tista' taħlitihom.