VueJS पर सबसे अच्छा डेवलपर बनने में आपकी मदद करने के लिए 10 टिप्स और ट्रिक्स

यहां Dev.to से " आपको बेहतर VueJS डेवलपर बनाने के लिए 10 टिप्स और ट्रिक्स " लेख का मुफ्त अनुवाद है। लेखक हमें सामान्य VueJS टूल का उपयोग करने के लिए दिलचस्प और उपयोगी विकल्पों के बारे में बताएगा।

परिचय

मुझे वास्तव में VueJS के साथ काम करने में मजा आता है और हर बार जब मैं ऐसा करता हूं, मैं इसकी क्षमताओं और विशेषताओं के बारे में गहराई से जानकारी देता हूं। इस लेख में, मैं आपके लिए १० बेहतरीन टिप्स और ट्रिक्स प्रस्तुत करता हूं, जिनके बारे में आप शायद नहीं जानते थे और आपको VueJS पर सबसे अच्छा डेवलपर बनने में मदद करने की कोशिश करेंगे।

चलो स्लॉट्स के वाक्यविन्यास को सुंदर बनाते हैं

Vue 2.6 की रिलीज़ के साथ, स्लॉट्स के लिए संक्षिप्ताक्षर उपलब्ध हो गए, जिनका उपयोग ईवेंट के रूप में किया जा सकता है (उदाहरण के लिए, v-on:click लिए @click संक्षिप्त नाम v-on:click ) या डेटा बाइंडिंग ( :src ) के लिए कोई कोलन । यदि आपके पास एक तालिका घटक उदाहरण के लिए है, तो आप निम्न सुविधा का उपयोग कर सकते हैं:

 <template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template> 

$ पर ('हुक:')

यह एक अच्छी सुविधा है जिसका उपयोग आप कर सकते हैं यदि आपको एक कस्टम ईवेंट श्रोता या किसी तीसरे पक्ष के प्लगइन को created या mounted हुक में beforeDestroy करने की आवश्यकता है और आपको मेमोरी लीक को रोकने के लिए इसे beforeDestroy हुक में निकालने की आवश्यकता है। $on('hook:') का उपयोग करके $on('hook:') आप किसी घटना को केवल एक हुक में परिभाषित या हटा सकते हैं।

 mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) } 

मान्यता प्रॉप्स

शायद आप पहले से ही जानते हैं कि अपने मूल को आदिम मूल्यों के साथ मान्य करना संभव है, जैसे String , Number या Object । लेकिन आप एक कस्टम सत्यापनकर्ता भी बना सकते हैं, उदाहरण के लिए तार की एक सरणी की जाँच करने के लिए:

 alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) } 

गतिशील निर्देश संबंधी तर्क

VueJS 2.6 की सबसे अच्छी विशेषताओं में से एक घटक निर्देशात्मक तर्कों को गतिशील रूप से निर्धारित करने की क्षमता है। मान लीजिए कि आपके पास एक बटन कंपोनेंट है और कुछ शर्तों के तहत Click इवेंट और अन्य सभी मामलों में DoubleClick इवेंट को सुनना चाहते हैं। यहाँ एक मामला है जहाँ ऐसा निर्देश काम आ सकता है:

 <template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script> 

और वास्तव में क्या अच्छा है -> यह है कि आप इस टेम्पलेट को गतिशील एचटीएमएल विशेषताओं, प्रॉप्स और बहुत कुछ पर लागू कर सकते हैं!

समान मार्गों के लिए पुन: उपयोग करने वाले घटक

कभी-कभी आपके पास अलग-अलग मार्ग होते हैं जो कुछ सेट घटकों का उपयोग करते हैं। यदि आप ऐसे मार्गों के बीच स्विच करते हैं, तो डिफ़ॉल्ट रूप से सामान्य घटक को फिर से नहीं बनाया जाएगा, क्योंकि Vue बेहतर प्रदर्शन के लिए इस घटक का पुन: उपयोग करेगा। लेकिन अगर आप इन घटकों को फिर से बनाना चाहते हैं, तो आप Router-View-Component में :key संपत्ति को परिभाषित कर सकते हैं:

 <template> <router-view :key="$route.fullPath"></router-view> </template> 

माता-पिता से बच्चे के घटक तक सभी सहारा पास करें

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

 <template> <childComponent v-bind="$props"/> </template> 

इसके बजाय:

 <template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template> 

माता-पिता से बच्चे के घटक तक सभी घटना श्रोताओं को पास करें

यदि आपके पास कोई चाइल्ड कंपोनेंट है जो पैरेंट कंपोनेंट के लिए रूट नहीं है, तो आप पेरेंट से लेकर बच्चे तक सभी ईवेंट श्रोताओं को इस तरह से पास कर सकते हैं:

 <template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template> 

यदि बच्चा घटक माता-पिता की जड़ में है, तो आपको ऐसी चाल की आवश्यकता नहीं होगी और सभी घटनाएं डिफ़ॉल्ट रूप से उपलब्ध होंगी।

$ सृजन

प्रत्येक Vue उदाहरण में $createElement लिए डिफ़ॉल्ट रूप से पहुंच है, जो वर्चुअल नोड बनाता है और वापस करता है। इसका उपयोग उदाहरण के लिए, v-html निर्देश को पारित किए जाने वाले तरीकों में मार्कअप का उपयोग करने के लिए किया जा सकता है। कार्यात्मक घटकों में, यह विधि render फ़ंक्शन के पहले तर्क के रूप में उपलब्ध है।

JSX का उपयोग करना

Vue CLI 3 शुरू होकर JSX सपोर्ट डिफॉल्ट रूप से सामने आया है। अब आप JSX का उपयोग करके अपना कोड लिख सकते हैं (उदाहरण के लिए, यदि आप प्रतिक्रिया के बाद अधिक सहज हैं), तो यह और भी सुविधाजनक हो सकता है, उदाहरण के लिए, कार्यात्मक घटकों को लिखने के लिए। यदि आप पहले से ही Vue CLI 3 का उपयोग नहीं कर रहे हैं, तो आप अपने प्रोजेक्ट में babel-plugin-transform-vue-jsx का समर्थन करने के लिए babel-plugin-transform-vue-jsx का उपयोग कर सकते हैं।

कस्टम v- मॉडल

डिफ़ॉल्ट रूप से, v-model वह है जिसे हम @input और :value घटनाओं पर वाक्य रचना चीनी कहते हैं। लेकिन आप अपने वीयू कंपोनेंट में model प्रॉपर्टी को निर्दिष्ट कर सकते हैं और यह निर्धारित कर सकते हैं कि किस इवेंट और प्रॉप्स का उपयोग किया जाएगा:

 export default: { model: { event: 'change', prop: 'checked' } } 

निष्कर्ष

मुझे आशा है कि मैं आपको सर्वश्रेष्ठ VueJS डेवलपर बनने में मदद करने के लिए कुछ सुझाव देने में सक्षम था।