Composable shine aiki mai sake amfani wanda ke burewa stateful logic ta amfani da Composition API. Sa jari ana kiransa useXxx kuma yana mayar da reactive state da ayyuka — na ba ka damar raba yiwuwa a cikin abubuwan haka ba tare da mixin ba ko maimaita.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // each call = independent state
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
Kowane component da ke kiran useCounter() yana samun nasa **nata" count — composables suna haifar da sabuwar state a kowane kira, ba kamar madaidaita bambanta na matakin module ba.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // set up
onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup!
return { x, y };
}
Composables na iya amfani da lifecycle hooks, masu kallo, da sauran composables — kuma muhimmi, suna **burewa cikakken shirye-shirye nasu" (onUnmounted), saboda haka masu amfani ba dole ne su tunaka shi ba.
Mixins (Vue 2): merged into the component — unclear where properties came from,
naming collisions between mixins, implicit dependencies
Composables: explicit imports + return values — clear sources, no collisions,
can be composed, fully typed in TypeScript
Composables shine hanyar idiomatic don sabon da sake amfani da stateful logic a Vue 3 — shiga bayanai, sarrafa ninka, reza/scroll cilta, debouncing, da sauransu.
Suna warware matsalar sake amfani da yiwuwa sosai (bayyane, ba haɗi-haɗi, na tunani, da Microsoft TypeScript) inda mixin na Vue 2 ya gazawa.
Su ne dalili na farko da ke sa jihohi su daukar Composition API: yiwuwar rabe ta zama aiki mai saikewa mai santsi maimakon ruwan jiya ko maimaita code.