Frontend Academy · पाठ

Composables: Reusable Composition Functions

use से शुरू होने वाले composable functions में reactive logic निकालें, उन्हें components के बीच साझा करें और समझें कि वे mixins से कैसे अलग हैं।

पाठ 4, कुल 4 में से13 चरण

Composables: Reusable Composition Functions, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Composables क्या हैं?

Composable ऐसा फ़ंक्शन है, जो स्टेट वाली लॉजिक को समाहित और पुनः उपयोग करने के लिए Composition API हुक का उपयोग करता है। ये mixins के Composition API समकक्ष हैं — लेकिन इनमें नेमस्पेस टकराव या छिपी हुई निर्भरताएँ नहीं होतीं।

एक बुनियादी Composable

रिएक्टिव लॉजिक को use से शुरू होने वाले फ़ंक्शन में निकालें। यह setup() की तरह ref, computed, watch और जीवनचक्र हुक का उपयोग कर सकता है।

// useCounter.ts
import { ref } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => (count.value = initial);
  return { count, increment, decrement, reset };
}

// Usage in any component:
const { count, increment } = useCounter(10);

जीवनचक्र हुक वाला Composable

Composables जीवनचक्र हुक रजिस्टर कर सकते हैं। ये हुक उस कंपोनेंट के संदर्भ में चलते हैं, जो composable को कॉल करता है।

// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useOnlineStatus() {
  const isOnline = ref(navigator.onLine);

  const update = () => (isOnline.value = navigator.onLine);

  onMounted(() => {
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
  });
  onUnmounted(() => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  });

  return { isOnline };
}

Async वाला Composable (useFetch)

Composables async डेटा लाने के लिए बहुत उपयोगी होते हैं — इनमें लोडिंग, त्रुटि और डेटा वाले पैटर्न को समाहित किया जा सकता है।

// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);

  watchEffect(async (onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(unref(url), { signal: controller.signal });
      data.value = await res.json();
    } catch (e: any) {
      if (e.name !== 'AbortError') error.value = e.message;
    } finally { loading.value = false; }
  });

  return { data, loading, error };
}

Ref को पैरामीटर के रूप में स्वीकार करना

Composables MaybeRef<T> (= T | Ref<T>) और मान ऐक्सेस करने के लिए unref() का उपयोग करके साधारण मान या refs, दोनों को तर्क के रूप में स्वीकार कर सकते हैं।

import type { MaybeRef } from 'vue';
import { unref } from 'vue';

function useDouble(num: MaybeRef<number>) {
  return computed(() => unref(num) * 2);
}

Composables बनाम Mixins

Mixins कंपोनेंट में प्रॉपर्टी जोड़ते हैं, लेकिन उनका स्रोत स्पष्ट नहीं होता। Composables स्पष्ट होते हैं — उनके return value से ठीक-ठीक पता चलता है कि composable क्या देता है। नामों के टकराव के बिना कई composables का उपयोग किया जा सकता है।

कंपोनेंट के बीच स्टेट साझा करना

यदि कोई composable अपने अंदर ref() को कॉल करता है, तो उसे कॉल करने वाले हर कंपोनेंट को अपना अलग स्टेट मिलता है। कंपोनेंट के बीच स्टेट साझा करने के लिए ref() को मॉड्यूल स्कोप पर, यानी composable फ़ंक्शन के बाहर, कॉल करें।

// Shared state (module-level):
const sharedCount = ref(0);

export function useSharedCounter() {
  // All callers share the same sharedCount
  return { count: sharedCount, increment: () => sharedCount.value++ };
}

Composable लाइब्रेरी

VueUse (vueuse.org) 200 से अधिक तैयार-इस्तेमाल composables उपलब्ध कराता है: useLocalStorage, useFetch, useDark, useIntersectionObserver और कई अन्य। कुछ शुरू से लिखने से पहले हमेशा VueUse देख लें।

Composables का परीक्षण

Composables का परीक्षण किसी छोटे परीक्षण कंपोनेंट के अंदर उन्हें कॉल करके या @vue/test-utils mountedApp पैटर्न का उपयोग करके करें। Vitest Vue की रिएक्टिविटी प्रणाली के साथ अच्छी तरह एकीकृत होता है।

Composable के नाम रखने के नियम

नाम के आरंभ में हमेशा use लगाएँ (useAuth, useFetch, useMediaQuery)। इन्हें एक ही ज़िम्मेदारी पर केंद्रित रखें। ऐसे composables से बचें, जो बहुत-सी असंबंधित चीज़ें करते हों।

Composable का संगठन

composables/ फ़ोल्डर बनाएँ। हर composable के लिए एक फ़ाइल रखें। Index फ़ाइल सभी composables को फिर से एक्सपोर्ट करे। यह React प्रोजेक्ट में custom hooks के संगठन जैसा है।

त्वरित जाँच

Vue mixins की तुलना में composables का मुख्य लाभ क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Vue Composables

Composable, use से शुरू होने वाला ऐसा फ़ंक्शन है, जो Composition API हुक को कॉल करता है। मॉड्यूल-स्तरीय refs का उपयोग न करने पर हर कॉल करने वाले को स्वतंत्र स्टेट मिलता है। MaybeRef और unref के साथ refs या मान स्वीकार करें। Composables के अंदर जीवनचक्र हुक रजिस्टर करें। अपना composable लिखने से पहले VueUse देखें। स्पष्ट return values mixin जैसी नेमस्पेस गड़बड़ी को रोकती हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Composables: Reusable Composition Functions” पाठ निःशुल्क है?

हाँ—“Composables: Reusable Composition Functions” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Composables: Reusable Composition Functions” में मैं क्या सीखूँगा?

use से शुरू होने वाले composable functions में reactive logic निकालें, उन्हें components के बीच साझा करें और समझें कि वे mixins से कैसे अलग हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Composables: Reusable Composition Functions” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

ref() और reactive()
computed() और watch()
setup() Function और script setup
Composables: Reusable Composition Functions

← Frontend Academy पर वापस जाएँ