Vue Academy · पाठ

समूहित प्रभावों के लिए effectScope

effectScope(), किसी दायरे में watchers और computed चलाना तथा सफ़ाई के लिए scope.stop()

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

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

सफ़ाई की समस्या

किसी कंपोनेंट के setup के बाहर बनाए गए वॉचर और परिकलित मान अपने-आप नष्ट नहीं होते। स्वतंत्र रूप से उपयोग किए जाने वाले कंपोज़ेबल या प्लगइन-स्तरीय कोड में प्रभाव लीक हो सकते हैं। effectScope प्रभावों को सामूहिक रूप से साफ़ करने के लिए उन्हें एक समूह में रखता है।

effectScope क्या करता है

effectScope() एक ऐसा दायरा बनाता है जो उसके चलने के दौरान बनाए गए किसी भी प्रतिक्रियाशील प्रभाव, जैसे वॉचर और परिकलित मान, को संग्रहित करता है। बाद में आप उस दायरे को रोककर उन सभी को एक साथ नष्ट कर सकते हैं।

import { effectScope } from "vue"

const scope = effectScope()

run के साथ प्रभाव एकत्र करना

scope.run(fn) को कॉल करें और अपने वॉचर तथा परिकलित मान fn के अंदर बनाएँ। उस कॉल के दौरान बनाया गया हर प्रभाव दायरे के साथ पंजीकृत हो जाता है।

import { effectScope, ref, watch, computed } from "vue"

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, (v) => console.log(v))
})

दायरा रोकना

scope.stop() एक ही कॉल में उस दायरे के अंदर बनाए गए हर वॉचर और परिकलित मान को रोक देता है — हर stop हैंडल को अलग-अलग ट्रैक करने की आवश्यकता नहीं होती।

scope.stop() // disposes all watchers and computed at once

यह क्यों महत्वपूर्ण है

दायरे के बिना आपको हर वॉचर का stop हैंडल सुरक्षित रखना पड़ता है और उन्हें एक-एक करके कॉल करना पड़ता है। कई प्रभावों के साथ यह त्रुटि-प्रवण हो जाता है। दायरा N सफ़ाई कार्रवाइयों को एक में बदल देता है।

// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget one

नेस्टेड दायरे

दायरे एक-दूसरे के अंदर बनाए जा सकते हैं। मूल दायरे के अंदर बनाया गया अधीनस्थ दायरा मूल दायरा रुकने पर अपने-आप रुक जाता है, इसलिए आपको बिना अतिरिक्त प्रयास के पदानुक्रमित सफ़ाई मिलती है।

const parent = effectScope()
parent.run(() => {
  const child = effectScope() // stopped when parent stops
  child.run(() => watch(/* ... */))
})
parent.stop() // stops child too

अलग किए गए दायरे

किसी अलग किए गए दायरे को बनाने के लिए true पास करें, जिसे आसपास का मूल दायरा संग्रहित नहीं करता। इसका उपयोग तब करें जब आप स्वतंत्र जीवनकाल नियंत्रण चाहते हों।

const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach it

उपयोग का उदाहरण: प्लगइन-स्तरीय सदस्यताएँ

एक सामान्य उपयोग किसी एक कंपोनेंट के बाहर चलने वाली प्लगइन या ऐप-स्तरीय प्रतिक्रियाशील सदस्यताओं के लिए है — जैसे किसी स्टोर को localStorage के साथ सिंक करना। उन्हें ऐसे दायरे में समूहित करें जिसे ऐप बंद होने पर रोक सकें।

const appScope = effectScope()
appScope.run(() => {
  watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()

पुनः उपयोग योग्य नष्टकर्ता बनाना

एक कंपोज़ेबल अपने आंतरिक प्रभावों को एक साथ रखने के लिए अपना दायरा बना सकता है और एकल dispose उपलब्ध करा सकता है। कॉल करने वाले एक ही कॉल से सब कुछ साफ़ कर सकते हैं।

export function useTracker() {
  const scope = effectScope()
  scope.run(() => {
    watch(/* ... */)
  })
  return { dispose: () => scope.stop() }
}

दायरे और कंपोनेंट

किसी कंपोनेंट के setup के अंदर Vue पहले से ही कंपोनेंट के जीवनचक्र से जुड़ा एक अंतर्निहित दायरा चलाता है — इसी कारण कंपोनेंट के वॉचर अनमाउंट होने पर अपने-आप साफ़ हो जाते हैं। effectScope आपको कंपोनेंट के बाहर भी यही क्षमता देता है।

getCurrentScope और onScopeDispose

किसी दायरे के अंदर आप onScopeDispose(fn) से सफ़ाई पंजीकृत कर सकते हैं। दायरा रुकने पर यह चलती है — यह onUnmounted के समान है, लेकिन किसी भी दायरे के लिए।

import { onScopeDispose } from "vue"

scope.run(() => {
  const id = setInterval(tick, 1000)
  onScopeDispose(() => clearInterval(id))
})

त्वरित जाँच

effectScope के बारे में अपनी समझ जाँचें।

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

सारांश

आपने समूहित प्रभावों के लिए effectScope के बारे में सीखा:

effectScope() ऐसा दायरा बनाता है जो अपने अंदर बनाए गए प्रभावों को संग्रहित करता है।
scope.run(fn) fn में बनाए गए वॉचर और परिकलित मानों को एकत्र करता है।
scope.stop() उन सभी को एक साथ नष्ट करता है; अधीनस्थ दायरे अपने मूल दायरे के साथ रुकते हैं (अलग किए गए दायरे के लिए true का उपयोग करें)।
onScopeDispose(fn) ऐसी सफ़ाई पंजीकृत करता है जो रुकने पर चलती है।
यह कंपोज़ेबल और कंपोनेंट के बाहर प्लगइन-स्तरीय प्रतिक्रियाशील सदस्यताओं के लिए आदर्श है।

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

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

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

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

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

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

क्या “समूहित प्रभावों के लिए effectScope” पाठ निःशुल्क है?

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

“समूहित प्रभावों के लिए effectScope” में मैं क्या सीखूँगा?

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

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

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

“समूहित प्रभावों के लिए effectScope” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

उन्नत प्रतिक्रियाशीलता: shallowRef और triggerRef
कंपोज़ेबल फ़ैक्टरी और पैरामीटरयुक्त कंपोज़ेबल
Vue में XState के साथ स्टेट मशीन
समूहित प्रभावों के लिए effectScope

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