Hizi ni njia mbili za kuandika sehemu za Vue. Options API inaorganiza msimbo kwa aina ya chaguo (data, methods, computed); Composition API inaorganiza msimbo kwa wasiwasi wa mantiki kwa kutumia vitendaji kama , , na .
Hizi ni njia mbili za kuandika sehemu za Vue. Options API inaorganiza msimbo kwa aina ya chaguo (data, methods, computed); Composition API inaorganiza msimbo kwa wasiwasi wa mantiki kwa kutumia vitendaji kama , , na .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Kila kitu kinaunganishwa katika vipu vya imara (data, methods, computed, lifecycle). Rahisi na kutafutika, lakini mantiki ya feature moja inataendelea katika vipu hivyo.
<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>
Hali, computed, njia, na lifecycle kwa wasiwasi mmoja wanakaa pamoja, na <script setup> inafanya hii kwa kufupika (hakuna this, hakuna return).
Composition API inakulazimisha kuchimba na kutumiwa tena mantiki ya hali kama vitendaji vya kawaida (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>
Hii inamaanisha kutatua kutumiwa tena kwa mantiki, ambayo ilikuwa ngumu katika Options API (mixins ilikuwa na mgogoro wa majina na vyanzo visivyoelezwa).
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 (na <script setup>) ni chaguo la kawaida linalopendekezwa kwa miradi mipya ya Vue 3, hasa na TypeScript.
Composition API ndio jibu la Vue 3 kwa kuorganiza na kutumiwa tena mantiki ya sehemu.
Kuelewa kwamba inaunganisha msimbo kwa feature (si kwa aina ya chaguo) na kuwezesha composables — kwa kulinganisha na Options API ya vipukuvu vya chaguo — inaeleza mtindo wa Vue wa kisasa na kwa nini sehemu ngumu na codebases za TypeScript zinaibaka.
Zote mbili zinasaidiwa kabisa; unaweza hata kuzichanganya.