Waɗannan hanyoyi biyu ne na rubuta Vue components. Options API ya shirya lamuni ta nau'in zaɓi (data, methods, computed); Composition API kuma ya shirya lamuni ta buƙatun tunani ta amfani da ayyuka kamar ref, , da .
Waɗannan hanyoyi biyu ne na rubuta Vue components. Options API ya shirya lamuni ta nau'in zaɓi (data, methods, computed); Composition API kuma ya shirya lamuni ta buƙatun tunani ta amfani da ayyuka kamar ref, , da .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Komai ana haɗa shi a cikin akwatin da aka ƙayyade (data, methods, computed, lifecycle). Sai dai a sauƙi da sabon bayyanwa, amma logic na fasali ɗaya yake watsi a waɗannan akwatin.
<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>
State, computed, methods, da lifecycle don ɗaya buƙatun ya zauna tare, da <script setup> yana ƙaula shi (babu this, babu return).
Composition API tana ba ka damar bada bayanai da sake amfani da logic mai zaman kansa azaman ayyuka mai sauƙ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>
Wan za shi a tsarkace matsala ta sake amfani da logic, wanda ya kasance dan wahala a Options API (mixins suna da saƙon adadin da ba a sani abin ya fito daga).
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 (tare da <script setup>) shine shawarar da aka ba ta talle ga sabon ayyukan Vue 3, musamman tare da TypeScript.
Composition API shine amsar Vue 3 ga shirya da sake amfani da logic na component.
Juyin kai cewa ya haɗa lamuni ta fasali (ba ta nau'in zaɓi ba) da yana ba da damar composables — akamai Options API ta akwatin-nau'in zaɓi — ya bayyana salon Vue na zamani da dalilin da abubuwan da ke da mahimma da bayananin TypeScript suka fi so shi.
Dukansu suna jiya sosai; kuma zai iya haɗa su.