Vue Academy · पाठ

script setup में Composables इम्पोर्ट करना और उपयोग करना

Composables इम्पोर्ट करना, third-party VueUse composables का उपयोग और imports व्यवस्थित करना।

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

script setup में Composables इम्पोर्ट करना और उपयोग करना, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Composables और script setup

Composables ऐसे फ़ंक्शन होते हैं जो प्रतिक्रियाशील लॉजिक को पुनःप्रयोग के लिए पैकेज करते हैं। <script setup> में इनका उपयोग करना सबसे ऊपरी स्तर पर इम्पोर्ट करके कॉल करने जितना सरल है।

सबसे ऊपरी स्तर पर इम्पोर्ट कीजिए

<script setup> के सबसे ऊपरी स्तर पर ही किसी composable को कॉल कीजिए — किसी शर्त, लूप या नेस्टेड फ़ंक्शन के अंदर नहीं। इससे Vue उसकी प्रतिक्रियाशीलता और जीवनचक्र हुक्स को सही ढंग से पंजीकृत कर पाता है।

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

सबसे ऊपरी स्तर क्यों महत्वपूर्ण है

Composables अक्सर onMounted जैसे जीवनचक्र हुक्स पंजीकृत करते हैं या वॉचर्स सेट अप करते हैं। इन्हें कंपोनेंट सेटअप के दौरान चलना आवश्यक है, जो तभी होता है जब आप composable को सबसे ऊपरी स्तर पर समकालिक रूप से कॉल करते हैं।

केवल आवश्यक चीज़ों को अलग कीजिए

कोई composable प्रतिक्रियाशील मानों और फ़ंक्शंस का एक ऑब्जेक्ट लौटाता है। कंपोनेंट में केवल उपयोग की जाने वाली चीज़ों को अलग कीजिए; उसी composable को दो बार कॉल करते समय नाम बदलकर टकराव से बचिए।

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

VueUse से परिचय

VueUse पहले से तैयार composables की एक लोकप्रिय लाइब्रेरी है। सामान्य लॉजिक स्वयं लिखने के बजाय, परीक्षण किया हुआ composable इम्पोर्ट कीजिए। इसे एक बार इंस्टॉल कीजिए और अपनी आवश्यकता की चीज़ें इम्पोर्ट कीजिए।

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage का प्रयोग

useLocalStorage ऐसा ref लौटाता है जो localStorage के साथ सिंक रहता है। ref बदलने पर ब्राउज़र का स्टोरेज अपडेट होता है; पेज दोबारा लोड करने पर मान बना रहता है।

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

प्रतिक्रियाशील निर्देशांकों के लिए useMouse

useMouse पॉइंटर की स्थिति को प्रतिक्रियाशील refs के रूप में ट्रैक करता है। यह आपके लिए इवेंट लिसनर जोड़ता और हटाता है, इसलिए आपको क्लीनअप स्वयं संभालने की आवश्यकता नहीं होती।

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

Composables का संयोजन

कोई composable अन्य composables को कॉल कर सकता है। यही परतदार संरचना Composition API का मूल है — छोटे हिस्से बनाइए और उन्हें मिलाकर बड़े फ़ीचर्स तैयार कीजिए।

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

सबसे ऊपरी स्तर पर await

<script setup> सबसे ऊपरी स्तर पर सीधे await का समर्थन करता है। कंपोनेंट async setup बन जाता है और फ़्रेमवर्क promise के हल होने तक रेंडरिंग को रोक सकता है।

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Async Setup के साथ Suspense

सबसे ऊपरी स्तर पर await का उपयोग करने वाले कंपोनेंट को उसके पैरेंट द्वारा <Suspense> सीमा में रैप किया जाना आवश्यक है। Async setup पूरा होने तक Suspense वैकल्पिक सामग्री दिखाता है।

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

सर्वोत्तम अभ्यास

Composables के नाम use प्रीफ़िक्स से रखिए।
उन्हें केवल सबसे ऊपरी स्तर पर कॉल कीजिए।
Refs लौटाइए (या toRefs में रैप किया हुआ reactive)।
अपना composable लिखने से पहले सामान्य आवश्यकताओं के लिए VueUse को प्राथमिकता दीजिए।

त्वरित जाँच

Composables की अपनी समझ की पुष्टि कीजिए।

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

पुनरावलोकन

आपने composables का उपयोग करना सीखा:

<script setup> के सबसे ऊपरी स्तर पर उन्हें इम्पोर्ट और कॉल कीजिए।
अपनी आवश्यकता की चीज़ों को अलग कीजिए (और उनके नाम बदल दीजिए)।
VueUse useLocalStorage और useMouse जैसे पहले से तैयार composables उपलब्ध कराता है।
सबसे ऊपरी स्तर का await setup को async बनाता है और <Suspense> के साथ काम करता है।

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

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

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

पाठ्यक्रम: 42
पाठ: 156

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

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

क्या “script setup में Composables इम्पोर्ट करना और उपयोग करना” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “script setup में Composables इम्पोर्ट करना और उपयोग करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“script setup में Composables इम्पोर्ट करना और उपयोग करना” में मैं क्या सीखूँगा?

Composables इम्पोर्ट करना, third-party VueUse composables का उपयोग और imports व्यवस्थित करना। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“script setup में Composables इम्पोर्ट करना और उपयोग करना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

script setup का परिचय
defineProps और defineEmits
defineExpose और useAttrs
script setup में Composables इम्पोर्ट करना और उपयोग करना

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