Vue Academy · पाठ

VueUse: कंपोज़ेबल लाइब्रेरी

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — व्यावहारिक VueUse का परिचय

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

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

VueUse क्या है

VueUse (@vueuse/core) सामान्य कार्यों के लिए पहले से तैयार कंपोज़ेबल का बड़ा संग्रह है—स्टोरेज, सेंसर, ब्राउज़र एपीआई और बहुत कुछ। यह आपको इन्हें फिर से बनाने से बचाता है।

npm install @vueuse/core

स्थायित्व के लिए useLocalStorage

useLocalStorage ऐसा रेफ़ लौटाता है जो localStorage के साथ समन्वयित रहता है। बदलाव रीलोड के बाद भी अपने-आप बने रहते हैं और क्रमबद्ध करने का काम आपके लिए हो जाता है।

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

प्रतिक्रियाशील और स्थायी

लौटाया गया रेफ़ किसी अन्य रेफ़ की तरह व्यवहार करता है—इसे v-model से बाइंड करें—लेकिन इसका मान पृष्ठ को रीफ़्रेश करने के बाद भी बना रहता है, क्योंकि VueUse उसे स्टोरेज में लिखता रहता है।

<input v-model="name" />

कर्सर की स्थिति के लिए useMouse

useMouse पॉइंटर को ट्रैक करता है और प्रतिक्रियाशील x तथा y रेफ़ लौटाता है, जो कर्सर के हिलने पर अपडेट होते हैं।

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

माउस निर्देशांक दिखाना

टेम्पलेट में रेफ़ को बाइंड करें; वे आपके द्वारा लिसनर जोड़े बिना, हर माउस मूव पर अपडेट होते हैं।

<p>Cursor: {{ x }}, {{ y }}</p>

आयामों के लिए useWindowSize

useWindowSize प्रतिक्रियाशील width और height रेफ़ देता है, जो आकार बदलने पर अपडेट होते हैं—स्क्रिप्ट में प्रतिक्रियाशील तर्क के लिए यह बहुत उपयोगी है।

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

प्रतिक्रियाशील तर्क

लेआउट से जुड़े निर्णयों को प्रतिक्रियाशील रूप से संचालित करने के लिए विंडो के आकार को किसी परिकलित मान के साथ मिलाएँ।

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

आवश्यकता पर लोडिंग के लिए useIntersectionObserver

useIntersectionObserver बताता है कि कोई तत्व व्यूपोर्ट में कब प्रवेश करता है—यह छवियों को आवश्यकता पड़ने पर लोड करने या अनंत स्क्रॉल की नींव है।

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

दृश्यता पर सक्रिय करना

एक टेम्पलेट रेफ़ और ऐसा कॉलबैक पास करें जो इंटरसेक्शन प्रविष्टियों के साथ सक्रिय होता है। target दिखाई देने पर छवि लोड करें या अधिक डेटा फ़ेच करें।

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

स्वचालित सफ़ाई

एक बड़ा लाभ यह है कि VueUse के कंपोज़ेबल अनमाउंट होने पर अपने लिसनर और ऑब्ज़र्वर को स्वयं पंजीकृत करके हटा देते हैं। आपको बिना अतिरिक्त प्रयास के सही सफ़ाई मिलती है।

VueUse का उपयोग क्यों करें

यह ट्री-शेकिंग समर्थित, अच्छी तरह परीक्षित और TypeScript-केंद्रित है। सामान्य ज़रूरतों—स्टोरेज, सेंसर, नेटवर्क और समय—के लिए अपना कंपोज़ेबल लिखने से पहले VueUse का उपयोग करें।

त्वरित जाँच

कौन-सा VueUse कंपोज़ेबल किसी रेफ़ को localStorage में स्थायी रूप से सहेजता है?

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

पुनरावलोकन

आपने VueUse का परिचय लिया: useLocalStorage (स्थायी स्थिति), useMouse (कर्सर की स्थिति), useWindowSize (प्रतिक्रियाशील आयाम) और useIntersectionObserver (आवश्यकता पर लोडिंग का ट्रिगर)—इन सभी में स्वचालित सफ़ाई और ट्री-शेकिंग की सुविधा है।

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

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

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

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

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

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

क्या “VueUse: कंपोज़ेबल लाइब्रेरी” पाठ निःशुल्क है?

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

“VueUse: कंपोज़ेबल लाइब्रेरी” में मैं क्या सीखूँगा?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — व्यावहारिक VueUse का परिचय आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“VueUse: कंपोज़ेबल लाइब्रेरी” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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