Composables ఏమిటి మరియు మీరు ఎలా రాస్తారు?

Question

Composables ఏమిటి మరియు మీరు ఎలా రాస్తారు?

Accepted Answer

**Composable** అనేది Composition API ను ఉపయోగించి **stateful logic** ను కాపాడే పునరుపయోగయోగ్యమైన ఫంక్షన్. సమ్మతి ప్రకారం దీనిని `useXxx` అని పేరు పెట్టారు మరియు ప్రతిచర్య స్థితి మరియు ఫంక్షన్‌లను తిరిగి ఇస్తుంది — mixins లేదా పునరావృత్తి లేకుండా భాగాల మధ్య తర్కాన్ని భాగస్వామ్యం చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ## Composable రాయడం ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## ఏదైనా భాగంలో ఉపయోగించడం ```vue ``` `useCounter()` ను పిలిచే ప్రతిটి భాగం దాని **స్వంత అలగ** `count` ను పొందుతుంది — composables ప్రతిটి కాల్‌కు తాజా స్థితిని సృష్టిస్తాయి, ఇది షేర్ చేయబడిన మాడ్యూల్-స్థాయి వేరియబుల్ కాకుండా. ## వాస్తవిక ఉదాహరణ: lifecycle తో useFetch ```js 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 lifecycle hooks, watchers మరియు ఇతర composables ఉపయోగించుకోవచ్చు — మరియు కీలకంగా, అవి **తమ స్వంత ఖాళీ** (`onUnmounted`) ను కాపాడతాయి, కనుక వినియోగదారులు దీనిని గుర్తు చేసుకోవలసిన అవసరం లేదు. ## Composables వర్సెస్ mixins (పాత మార్గం) ```text 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 Vue 3 లో stateful logic ను సంగ్రహించడానికి మరియు తిరిగి ఉపయోగించుకోవడానికి *ఆదర్శప్రాయ* మార్గం — డేటా ఫెచ్ చేయడం, ఫారమ్ నిర్వహణ, mouse/scroll ట్రాకింగ్, debouncing, మొదలైనవి. వారు Vue 2 యొక్క mixins విఫలమైన (స్పష్టమైన, collision-free, composable, TypeScript-friendly) తర్కం-పునరుపయోగ సమస్యను స్పష్టంగా పరిష్కరిస్తారు. వారు Composition API ను స్వీకరించే జట్ల ప్రధాన కారణం: భాగస్వామ్య తర్కం చెల్లిపోయిన లేదా నకిలీ కోడ్‌కు బదులుగా సులభమైన, పరీక్షపు ఫంక్షన్ ఆ విధంగా సంభవిస్తుంది.