Vue Academy · पाठ

Composition API में Computed और Watch

derived state के लिए computed() तथा side effects के लिए watch() और watchEffect()।

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

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

state से मान निकालना और बदलावों पर प्रतिक्रिया देना

प्रतिक्रियाशील state कहानी का केवल आधा हिस्सा है। आपको इससे नए मान निकालने और बदलावों पर प्रतिक्रिया देने की भी आवश्यकता होती है। संयोजन प्रोग्रामिंग इंटरफ़ेस इसके लिए computed, watch और watchEffect देता है।

व्युत्पन्न मानों के लिए computed

computed() एक गेटर फ़ंक्शन लेता है और ऐसा ref लौटाता है जिसका मान अन्य प्रतिक्रियाशील state से निकाला जाता है। JS में इसे .value से इस्तेमाल करें; टेम्पलेट में इसका आवरण अपने-आप हट जाता है।

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed आवश्यकता पर चलता और परिणाम सहेजता है

computed केवल तभी दोबारा गणना करता है जब उसकी कोई प्रतिक्रियाशील निर्भरता बदलती है। यदि आप बिना किसी बदलाव के इसे दस बार पढ़ते हैं, तो गेटर एक ही बार चलता है और सहेजे गए परिणाम का दोबारा उपयोग होता है।

इससे computed महँगी गणनाओं के लिए आदर्श बनता है।

computed अपने-आप अपडेट होता है

किसी निर्भरता को बदलें और अगली बार पढ़े जाने पर computed अपडेट हो जाएगा। आपको इसे स्वयं कभी कॉल नहीं करना पड़ता।

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

पार्श्व प्रभावों के लिए watch

watch() किसी प्रतिक्रियाशील स्रोत पर नज़र रखता है और उसके बदलने पर कॉलबैक चलाता है। कॉलबैक को नया मान और पुराना मान मिलता है।

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch डिफ़ॉल्ट रूप से आवश्यकता पर चलता है

computed के विपरीत, watch अपना कॉलबैक तुरंत नहीं चलाता। यह पहले बदलाव की प्रतीक्षा करता है। इसका उपयोग पार्श्व प्रभावों के लिए करें: लॉग दर्ज करना, डेटा प्राप्त करना और संग्रहण में सहेजना।

कई स्रोतों पर नज़र रखना

एक साथ कई मानों पर नज़र रखने के लिए स्रोतों की एक ऐरे watch को दें। कॉलबैक को नए और पुराने मानों की ऐरे मिलती हैं।

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

गेटर पर नज़र रखना

किसी प्रतिक्रियाशील वस्तु के गुण पर नज़र रखने के लिए एक गेटर फ़ंक्शन दें। वस्तु पर सीधे नज़र रखने से केवल गहरे बदलावों पर ही कॉलबैक चलता है, जो कभी-कभी आश्चर्यजनक हो सकता है।

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: तुरंत चलना और स्वतः-निगरानी

watchEffect() अपना फ़ंक्शन तुरंत चलाता है और उसके अंदर इस्तेमाल किए गए किसी भी प्रतिक्रियाशील मान के बदलने पर उसे फिर से चलाता है। आपको निर्भरताओं की सूची नहीं देनी पड़ती — वे अपने-आप ट्रैक की जाती हैं।

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch और watchEffect की तुलना

watch: स्पष्ट स्रोत, आवश्यकता पर चलता है, पुराने और नए मान देता है।
watchEffect: निर्भरताओं को स्वतः ट्रैक करता है, तुरंत चलता है, पुराने मान तक पहुँच नहीं देता।

जब आपको पिछला मान चाहिए या सटीक नियंत्रण रखना हो, तब watch का उपयोग करें। त्वरित प्रतिक्रियाशील पार्श्व प्रभावों के लिए watchEffect का उपयोग करें।

computed बनाम watch

जब आपको नया व्युत्पन्न मान चाहिए, तब computed का उपयोग कीजिए। किसी बदलाव के जवाब में कोई कार्रवाई करनी हो, तो watch या watchEffect का उपयोग कीजिए। किसी मान की दोबारा गणना करने के लिए watch का उपयोग न करें — इसके लिए computed ही है।

त्वरित जाँच

सही प्रतिक्रियाशील सहायक चुनिए।

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

पुनरावलोकन

अब आप मानों को व्युत्पन्न करना और बदलावों पर प्रतिक्रिया देना जानते हैं:

computed आवश्यकता पड़ने पर गणना किए जाने वाले, कैश किए गए व्युत्पन्न मान बनाता है।
watch किसी विशिष्ट स्रोत पर प्रतिक्रिया देता है और नए तथा पुराने मान उपलब्ध कराता है; यह आवश्यकता पड़ने पर ही चलता है।
watchEffect तुरंत चलता है और अपनी निर्भरताओं को स्वतः ट्रैक करता है।
मानों के लिए computed और साइड इफेक्ट्स के लिए watch/watchEffect का उपयोग कीजिए।

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

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

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

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

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

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

क्या “Composition API में Computed और Watch” पाठ निःशुल्क है?

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

“Composition API में Computed और Watch” में मैं क्या सीखूँगा?

derived state के लिए computed() तथा side effects के लिए watch() और watchEffect()। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“Composition API में Computed और Watch” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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