Vue.js: आपके और तीसरे पक्ष के घटकों के जीवनचक्र के हुक

जीवनचक्र के हुक किसी भी घटक का एक बहुत महत्वपूर्ण हिस्सा हैं। हम, हमारे आवेदन, अक्सर यह जानना जरूरी है कि एक घटक का क्या होता है जब इसे बनाया जाता है, माउंट किया जाता है, अपडेट किया जाता है, या नष्ट कर दिया जाता है।

घटक में, हम उपयुक्त तरीकों का उपयोग करके इन घटनाओं को पकड़ सकते हैं, उदाहरण के लिए:

• बनाया - घटक उदाहरण बनाया जाता है
• घुड़सवार - घटक उदाहरण घुड़सवार है
• अपडेट किया गया - डेटा परिवर्तनों के कारण वर्चुअल डोम को अपडेट किया गया है
• नष्ट - घटक उदाहरण नष्ट हो गया है
• आदि प्रलेखन

हमारे घटक के कोड में, यह इस तरह दिखेगा:

// MyComponent.vue <template> <h1>Hello, {{ who }}</h1> </template> <script> export default { name: 'MyComponent', data() { return { who: 'world' } }, mounted() { //  -      } } </script> 

सब ठीक है। लेकिन क्या होगा अगर माता-पिता घटक को यह जानने की जरूरत है कि बाल घटक में क्या हो रहा है, उदाहरण के लिए, कि घटक अद्यतन किया गया है? बाल घटक में, हम एक घटना को बढ़ा सकते हैं, और मूल घटक पर एक श्रोता को लटका सकते हैं। हमारे आवेदन के कोड में, यह इस तरह दिखेगा:

 //   ChildComponent.vue <template> <div> <div>Count: {{ counter }}</div> <button @click="add">+1</button> </div> </template> <script> export default { name: 'ChildComponent', data() { return { counter: 0 } }, updated() { this.$emit('updated') }, methods: { add() { this.counter++ } } } </script> 

 //   ParentComponent.vue <template> <div> <ChildComponent @updated="usefulMethod"/> </div> </template> <script> import ChildComponent from 'ChildComponent.vue' export default { name: 'ParentComponent', components: { ChildComponent }, data() { return {} }, methods: { usefulMethod() { //  -        } } } </script> 

महान, बच्चे के घटक को अद्यतन करते समय, माता-पिता घटक अद्यतन घटना को पकड़ता है और उपयोगीमेथोड () विधि निष्पादित करता है।

सब कुछ अच्छा है! लेकिन क्या होगा अगर हमें npm या git से डाउनलोड किए गए तृतीय-पक्ष घटक को एम्बेड करने की आवश्यकता है और मूल घटक में कुछ उपयोगी है, उदाहरण के लिए, जब यह बढ़ते हैं? एक घटना उत्पन्न करने के लिए एक घुड़सवार हुक में, एक तीसरे पक्ष के घटक के कोड में जाओ ... एक अच्छा विचार नहीं है! लेकिन क्या होगा अगर मैं आपको बताऊं कि आपके पास नहीं है! इसके बजाय, हम सिर्फ घटना सुन सकते हैं! इस ईवेंट का नाम जीवनचक्र हुक का नाम होगा, लेकिन @hook: उपसर्ग @hook: जाना चाहिए @hook: कुछ इस तरह से @hook:___ , उदाहरण के लिए: @hook:mounted, @hook:updated @hook:destroyed ।

कोड में, यह कुछ इस तरह दिखेगा:

 //   ParentComponent.vue <template> <div> <ThirdPartyComponent @hook:mounted="usefulMethod"/> </div> </template> <script> import ThirdPartyComponent from 'vue-third-party-component' //   export default { name: 'ParentComponent', components: { ThirdPartyComponent }, data() { return {} }, methods: { usefulMethod() { //  -    mounted     } } } </script> 

यह मुझे लगता है कि यह अपने और तीसरे पक्ष के दोनों घटकों के साथ काम करने के लिए एक बहुत ही उपयोगी कार्यक्षमता है। मुझे आशा है कि आप इसे उपयोगी पाएंगे। यह थोड़ा अजीब है कि इसके बारे में दस्तावेज़ीकरण में कोई शब्द नहीं है और कुछ सुविधाएँ केवल स्रोत कोड को पढ़कर पाई जा सकती हैं।

पढ़ने के लिए धन्यवाद। गोदी और स्रोत पढ़ें! और आने वाले नए साल 2020 के साथ!