जावास्क्रिप्ट लाइब्रेरी से फ्रेमवर्क तक, Vue की यात्रा प्रभावशाली है, खासकर जब आप विचार करते हैं कि यह अभी भी अपने हल्के स्वभाव को कैसे बनाए रखता है। कई विशेषताएं हैं जो Vue3 प्रदान करता है, जिसमें पिनिया भी शामिल है, जो आसान राज्य प्रबंधन को सक्षम बनाता है, साथ ही एक बिल्ड टूलचैन जो Vite पर काम करता है। चाहे आप अपने ऐप्स को Vue3 में अपडेट करना चाहते हैं या केवल फ्रेमवर्क के साथ प्रयोग करना चाहते हैं, हमने यहां वो सब कुछ संकलित किया है जो आपको Vue3 के बारे में जानने की जरूरत है!
Vue3 क्या है?
इससे पहले कि हम Vue3 में आपको दिखाई देने वाले परिवर्तनों पर ध्यान दें, आइए पहले एक नज़र डालते हैं कि Vue.js और इसके मुख्य घटक क्या हैं:
वीयूई
Vue.js एक ओपन-सोर्स फ्रंट-एंड जावास्क्रिप्ट फ्रेमवर्क है जिसका उपयोग यूजर इंटरफेस बनाने के लिए किया जा सकता है। ढांचा एक घोषणात्मक और घटक-आधारित कोडिंग दृष्टिकोण प्रदान करता है जो उपयोगकर्ता के प्रदर्शन के त्वरित विकास में सहायता करता है। इसका उपयोग बुनियादी या जटिल इंटरफेस विकसित करने के लिए किया जा सकता है और यह उद्योग-मानक एचटीएमएल, सीएसएस और जावास्क्रिप्ट के शीर्ष पर बनाया गया है। Vue.js की लोकप्रियता और Vue.js के बड़े उपयोगकर्ता आधार का कारण इसका प्रोग्रामर-अनुकूल सिंटैक्स, उपयोग में आसानी और अच्छी तरह से परिभाषित दस्तावेज़ीकरण है।
जैसा कि ऊपर उल्लेख किया गया है, Vue.js दो मुख्य विशेषताओं पर बनाया गया है:
घोषणात्मक प्रतिपादन उपयोगकर्ता को जावास्क्रिप्ट स्थिति के आधार पर घोषणात्मक रूप से HTML आउटपुट को परिभाषित करने में सक्षम बनाता है। Vue.js टेम्प्लेट सिंटैक्स की मदद से सामान्य HTML पर फैलता है।
प्रतिक्रियाशीलता - Vue.js सक्रिय रूप से जावास्क्रिप्ट स्थिति की निगरानी करता है, और जब इसे संशोधित किया जाता है, तो यह जल्दी से DOM को रीफ्रेश करता है।
व्यू3.0
जो इंजीनियर Vue 2 से कोड का उपयोग कर रहे हैं, उन्हें अब Vue3 में अपडेट करना होगा। ऐसा इसलिए है क्योंकि इसमें नई क्षमताएं हैं जो हमारे अनुप्रयोगों को व्यवस्थित करने के लिए डिजाइनिंग को पढ़ने योग्य, सुसंगत घटकों को बहुत आसान और बेहतर तरीके बनाती हैं। Vue3 अधिक उपयोगकर्ता के अनुकूल, छोटा और बनाए रखने में आसान है। Vue3 की कुछ उल्लेखनीय विशेषताएं टेलीपोर्ट, फ्रैगमेंट और कई वी-मॉडल हैं।
नवीनतम संस्करण को भी फिल्टर से छुटकारा मिल गया है और इसमें राज्य-संचालित सीएसएस चर के साथ-साथ एक प्रयोगात्मक रहस्य सुविधा भी है। इसमें जीवनचक्र नामकरण संशोधन और एकल फ़ाइल घटक परिवर्तन भी हैं।
क्या Vue3 जारी किया गया है?
Vue का नवीनतम संस्करण उपलब्ध है - Vue3, शुरू में 2018 के मध्य में घोषित किया गया था और आधिकारिक तौर पर सितंबर 2020 में जारी किया गया था। Vue3.0 को 7 फरवरी 2022 को प्रगतिशील जावास्क्रिप्ट ढांचे के आधिकारिक डिफ़ॉल्ट संस्करण के रूप में घोषित किया गया था।
Vue3 में नया क्या है?
Vue3 में आगे देखने के लिए सबसे रोमांचक परिवर्तन हैं:
प्रदान करें / इंजेक्ट करें
Vue 2 ने उपयोगकर्ताओं को कोड में प्रॉप्स के माध्यम से डेटा जैसे स्ट्रिंग्स, एरेज़, ऑब्जेक्ट्स और बहुत कुछ पास करने की अनुमति दी। इस तरह के डेटा को मूल तत्व से उसके बाल तत्वों तक आसानी से पारित किया जा सकता है। हालाँकि, प्रॉप्स के उपयोग ने मूल तत्व से डेटा को गहरे नेस्टेड चाइल्ड एलिमेंट में भेजना अधिक चुनौतीपूर्ण बना दिया। नतीजतन, डेवलपर्स को Vuex Store और Event Hub का उपयोग करना पड़ा। Vue 2.2.0 में प्रोवाइड/इंजेक्ट भी शामिल है, लेकिन इसे सामान्य प्रोग्राम कोड में इस्तेमाल करने की सलाह नहीं दी गई थी।
हालाँकि, Vue3 में बेहतर प्रोवाइड/इंजेक्ट कॉम्बो का उपयोग करके, हम डेटा को अधिक तेज़ी से और बड़े करीने से पास कर सकते हैं। जैसा कि नाम से पता चलता है, हम मूल तत्व से उसके किसी भी बच्चे के घटकों के लिए डेटा को सुलभ बनाने के लिए उपयोग करते हैं, भले ही वे बाल तत्व कितने भी गहरे हों। यहां, हम प्रदान का उपयोग वस्तुओं के रूप में या कार्यों के रूप में कर सकते हैं।
टेलीपोर्ट
आप जिस ऐप का निर्माण करना चाहते हैं, उसके तर्क के आधार पर, आपके घटकों को उन जगहों पर दिखाया जा सकता है, जहां से आप उन्हें प्रदर्शित करना चाहते हैं। उदाहरण के लिए, आप एक पॉपअप बनाना चाह सकते हैं जिसका उद्देश्य पूरी स्क्रीन को प्रदर्शित करना और लेना है। इसे दूर करने के लिए, हम CSS में ऐसे घटकों की स्थिति विशेषता का उपयोग कर सकते हैं, लेकिन Vue3 के साथ, डेवलपर्स टेलीपोर्ट का भी उपयोग कर सकते हैं।
टेलीपोर्ट प्रोग्रामर को अपने प्रारंभिक कंटेनर से एक तत्व लेने देता है जिसमें वह लपेटा जाता है और उन्हें उस पृष्ठ पर पहले से मौजूद किसी भी घटक पर ले जाता है जहां वे उपयोग में होते हैं। उदाहरण के लिए, आप शीर्षलेख तत्व को #app div से शीर्षलेख में स्थानांतरित कर सकते हैं। याद रखें कि आप टेलीपोर्ट का उपयोग केवल कोड के घटकों में तत्वों को स्थानांतरित करने के लिए कर सकते हैं जो Vue DOM के बाहर मौजूद हैं।
टुकड़े टुकड़े
Vue 2 में फ़ाइल के टेम्प्लेट में कई रूट घटकों का होना मुश्किल है। प्रोग्रामर ने सभी घटकों को मूल घटक में उसी के समाधान के रूप में संलग्न करना शुरू कर दिया। कभी-कभी, प्रोग्रामर को एक तत्व को उसके चारों ओर लपेटे बिना एक कंटेनर के बिना प्रस्तुत करने की आवश्यकता हो सकती है। फ्रैगमेंट्स के लिए इंजीनियरों के पास अब रूट टेम्पलेट फ़ाइल में कई आइटम हो सकते हैं, जो कि Vue3 में जोड़ा गया एक फीचर है।
ग्लोबल व्यू एपीआई
आपको अक्सर Vue.component या Vue.use किसी Vue ऐप की main.js फ़ाइल में मिल सकते थे। उन्हें ग्लोबल एपीआई के रूप में संदर्भित किया जाता है, और Vue 2 में ऐसी कई विधियाँ हैं। यहाँ यदि आपके पास अपने ऐप के कई उदाहरण हैं, तो उन सभी को Vue के ऊपर रखा गया है। विशिष्ट कार्यक्षमता को एकल अनुप्रयोग उदाहरण तक सीमित करना कठिन है।
Vue3 createApp नामक एक नया ग्लोबल एपीआई पेश करके इस समस्या को हल करता है। इस पद्धति से, आप Vue एप्लिकेशन का एक नया उदाहरण प्राप्त कर सकते हैं। सभी Vue 2.x-संबंधित API को अलग-अलग ऐप इंस्टेंस में स्थानांतरित कर दिया जाएगा। यह आपके एप्लिकेशन के प्रत्येक इंस्टेंस को ऐसे कार्य करने की अनुमति देता है जो पहले से उपयोग में आने वाले अन्य उदाहरणों को बाधित किए बिना इसके लिए अनन्य हैं।
घटनाक्रम एपीआई
Vuex Store का उपयोग करने के अलावा, Event Bus का उपयोग उन सबसे लोकप्रिय तरीकों में से एक है, जो प्रोग्रामर्स ने उन तत्वों के बीच डेटा पास करने के लिए उपयोग किया है जो माता-पिता-बच्चे के संदर्भ को साझा नहीं करते हैं। हालाँकि, $on, $off , और $ones जैसे कोड सभी Vue3 में हटा दिए गए थे। लेकिन $emit अभी भी पहुंच योग्य है क्योंकि बाल तत्वों को अपने मूल तत्वों में ईवेंट उत्सर्जित करना होगा। इसका समाधान प्रदान/इंजेक्शन का उपयोग करना होगा।
विटे-पावर्ड बिल्ड टूलचेन
Vue, Vite के निर्माता Evan You द्वारा डिज़ाइन किया गया एक शीर्ष Vue SFC सपोर्ट टूलचेन है जो हल्का और बनाने में तेज़ है। Vite अब मानक Vue3 बिल्ड कॉन्फ़िगरेशन के पीछे का इंजन है। मॉड्यूल बंडलर @vue-cli/service , जो वेबपैक के शीर्ष पर बनाया गया है, लॉन्च, हॉट रीलोड और संकलन पर आपके पूरे Vue एप्लिकेशन को लपेट देगा। दूसरी ओर, Vite आपके प्रोग्राम कोड से ES इंपोर्ट सिंटैक्स लेगा और HTTP अनुरोध भेजने से पहले ब्राउज़र को प्रत्येक आयात का विश्लेषण करने की अनुमति देगा।
बदलाव मुख्य रूप से स्पीड की वजह से किया जा रहा है। सर्वर तुरंत शुरू हो जाता है क्योंकि यह जावास्क्रिप्ट घटकों के लिए देशी ब्राउज़र समर्थन को नियोजित करता है और बहुत तेज है।
संरचना एपीआई सिंटैक्स
विकल्प एपीआई का उपयोग तत्व स्थिति और तर्क बनाने के लिए किया गया था। Vue3 द्वारा कंपोजिशन एपीआई को उसी के विकल्प के रूप में लॉन्च किया गया था। यह केवल एपीआई का एक संग्रह है जो हमें आयातित विधियों का उपयोग करके विकल्पों को परिभाषित किए बिना Vue तत्व बनाने में सक्षम बनाता है।
संरचना एपीआई में निम्नलिखित एपीआई शामिल हैं:
प्रतिक्रियाशीलता एपीआई - उदाहरण के लिए, रेफरी () और प्रतिक्रियाशील ()। यह सीधे प्रतिक्रियाशील स्थिति, गणना की गई स्थिति और इसका उपयोग करने वाले दर्शकों का निर्माण कर सकता है।
जीवनचक्र हुक - उदाहरण के लिए, onMounted () और onUnmounted ()। हम जीवनचक्र हुक का उपयोग करके तत्व जीवनचक्र में शामिल हो सकते हैं।
निर्भरता इंजेक्शन - उदाहरण के लिए, प्रदान करें () और इंजेक्शन ()। रिएक्टिविटी एपीआई के साथ Vue की निर्भरता इंजेक्शन प्रणाली का उपयोग निर्भरता इंजेक्शन द्वारा संभव बनाया गया है।
रचना एपीआई का उपयोग करने के पेशेवरों
विकल्प API पर कंपोज़िशन API का उपयोग करने के मुख्य लाभ हैं:
- प्रतिक्रियाशील स्थिति उत्पन्न करने के लिए Vue3 के साथ एक तत्व की अब आवश्यकता नहीं है।
- कई प्रतिक्रियाशील विशेषताओं को जोड़ते समय, Vue.js तत्वों में सेटअप फूला हुआ हो सकता है। इस वजह से अलग-अलग जावास्क्रिप्ट फाइलों में इन प्रतिक्रियाशील चरों को सारणित करना उपयोगी हो सकता है।
- कंपोज़िशन एपीआई का मुख्य लाभ यह है कि यह कंपोज़ेबल विधियों के आकार में स्पष्ट, प्रभावी तर्क का पुन: उपयोग करना संभव बनाता है। यह मिक्सिन के साथ सभी मुद्दों को संबोधित करता है, विकल्प एपीआई में तर्क का पुन: उपयोग करने की मुख्य विधि।
- आप कंपोजिशन एपीआई में पूर्ण प्रकार के अनुमान के साथ कोड टाइप कर सकते हैं।
- कंपोज़िशन एपीआई में आप जो प्रोग्राम लिखते हैं, वे अधिक कुशल होते हैं, और वेरिएबल्स के नाम छोटे किए जा सकते हैं। यह ओवरहेड को कम करता है।
- आप अपने प्रोग्राम कोड को कंपोजिशन एपीआई के साथ बेहतर तरीके से साझा कर सकते हैं।
पिनिया
पिनिया Vue.js के लिए एक हल्का राज्य प्रबंधन उपकरण है। यह हमें तत्वों और पृष्ठों के बीच एक स्थिति साझा करने में सक्षम बनाता है। यह Vue3 में नई प्रतिक्रियाशीलता अवधारणा का उपयोग करके एक उपयोगकर्ता के अनुकूल, पूरी तरह से टाइप किया गया राज्य प्रबंधन ढांचा बनाता है। यह अब Vue3 का नया मानक राज्य नियंत्रण पुस्तकालय है।
पिनिया ने शुरुआत में Vuex की क्षमता के अध्ययन के रूप में कार्य किया। लंबे समय तक, Vuex, Vue के लिए सुझाई गई राज्य प्रबंधन प्रणाली थी, लेकिन Vue3 के साथ, आधिकारिक दस्तावेज़ीकरण में राज्यों के प्रबंधन के लिए पिनिया अनुशंसित प्रणाली है। वर्तमान में, Vuex रखरखाव मोड में है। यद्यपि यह कार्य करना जारी रखता है, कोई नई सुविधाएँ नहीं जोड़ी जाएंगी। ताजा ऐप्स के लिए पिनिया के इस्तेमाल की सलाह दी जाती है।
पिनिया का?
पिनिया बहुत हल्का है, केवल 1KB तक आ रहा है। इसके अतिरिक्त, यह Vue 2 और Vue3 में आपके कोडिंग अनुभव को बेहतर बनाने के लिए Vue.js देव टूल के साथ एकीकृत होता है। चूंकि पिनिया आपके सभी डेटाटाइप का अनुमान लगाता है, यह आपको जावास्क्रिप्ट में भी पूर्ण और सटीक ऑटो पूर्णता प्रदान कर सकता है। पिनिया डिजाइन द्वारा मॉड्यूलर भी है, उपयोगकर्ता के अनुकूल और विस्तार योग्य है। कुल मिलाकर, पिनिया हल्का, सरल और सीधा प्रतीत होता है। यह बारीकी से तत्वों से निपटने जैसा दिखता है और इसमें Vue3 में गतिशील प्रोग्रामिंग के लिए आवश्यक सभी उपकरण शामिल हैं।
क्या Vue 2 को हटा दिया जाएगा?
Vue 2 के लिए अंतिम मामूली अपडेट Vue 2.7 था, जिसे जुलाई 2022 में जारी किया गया था। Vue 2 वर्तमान में रखरखाव मोड में है। हालांकि कोई अतिरिक्त सुविधाएँ नहीं भेजी जाएंगी, फिर भी इसे 18 महीनों के लिए महत्वपूर्ण बग फिक्स और सुरक्षा पैच मिलेंगे। 2023 के अंत तक, Vue 2 को हटा दिया जाएगा।
Vue 2 . से माइग्रेशन
आपके सॉफ़्टवेयर के आधार पर, यदि आप Vue 2 का उपयोग करके एक बहुत बड़ी परियोजना पर काम कर रहे हैं, तो Vue3 पर स्विच करना सार्थक नहीं हो सकता है। यदि अनुकूलन के आपके सर्वोत्तम प्रयासों के बावजूद दक्षता की समस्या बनी रहती है, तो Vue3 का उपयोग करें।
आप अपने एप्लिकेशन को Vue3 में माइग्रेट करना चाहते हैं या नहीं, यह इसके आकार और जटिलता पर निर्भर करता है। Vue 2 में अधिकांश सिंटैक्स और तकनीक Vue3 की तरह ही हैं। हालाँकि, यदि आप ऊपर बताए गए कुछ परिवर्तनों का उपयोग करना चाहते हैं, तो माइग्रेट करना एक बेहतर विचार होगा।
AppMaster प्रोजेक्ट में Vue.js
हमारे उपयोगकर्ताओं के लिए फ्रंट-एंड एप्लिकेशन बनाने के लिए AppMaster प्लेटफॉर्म VueJS फ्रेमवर्क, या फ्रेमवर्क के तीसरे संस्करण का उपयोग करता है। Vue 3 का उपयोग व्यवस्थापक, पैनल और क्लाइंट पोर्टल बनाने के लिए किया जाता है, और AppMaster स्टूडियो का संपूर्ण इंटरफ़ेस वास्तव में VueJS ढांचे का भी उपयोग करके बनाया गया है।
हम अपने उत्पाद को जल्दी और कुशलता से विकसित करने में सक्षम होने के लिए माइक्रो-फ्रंटएंड या फ्रंट-एंड माइक्रोसर्विसेज नामक एक विशेष दृष्टिकोण का उपयोग करते हैं; उदाहरण के लिए, प्रत्येक डेटा मॉडल संपादक और व्यवसाय प्रक्रिया संपादक हमारे प्लेटफ़ॉर्म में एक पूरी तरह से अलग फ्रंट-एंड एप्लिकेशन है। यह हमें विकास टीम के दृष्टिकोण से बहुत तेज़ी से और स्वतंत्र रूप से विकसित करने की अनुमति देता है, जिससे हमारे उत्पाद की समग्र गति बढ़ जाती है। ये सभी लाभ हमारे ग्राहक हमारे अनुप्रयोगों का उपयोग करके प्राप्त कर सकते हैं।
भविष्य में, एसपीए सिंगल-पेज एप्लिकेशन मोड के अलावा, हम एसएसआर (सर्वर-साइड रेंडरिंग) मोड जोड़ेंगे, जो हमारे ग्राहकों को न केवल व्यवस्थापक पैनल और कस्टम पोर्टल बनाने की अनुमति देगा, बल्कि पूर्ण विशेषताओं वाली वेबसाइटें भी बना देगा। उच्च एसईओ अनुकूलन।
नो-कोड के बारे में
कोडिंग के लोकतंत्रीकरण को प्रभावित करने वाले प्रमुख तत्वों में से एक नो-कोड विकास दृष्टिकोण है । आजकल, बड़ी संख्या में लोग कोडिंग के अभाव में सामान्य रूप से प्रोग्रामिंग का उपयोग कर सकते हैं। यह वेब डिज़ाइन, मोबाइल एप्लिकेशन डेवलपमेंट और रेस्पॉन्सिव वेब डेवलपमेंट को आसान बनाता है।
AppMaster उन अनुप्रयोगों में से है जिनका उपयोग स्वचालित रूप से स्रोत कोड बनाने के लिए किया जा सकता है। आप किसी भी समय कोड को देख और निरीक्षण कर सकते हैं। AppMaster के साथ, आपके पास कंप्यूटर भाषा का उपयोग करके प्रोजेक्ट जानकारी को अनुकूलित करने का विकल्प है। यदि लोग चाहें तो हम लोगों को कोड निर्यात करने देते हैं। यह एक गारंटी है कि जिस एप्लिकेशन पर आप AppMaster के साथ काम कर रहे हैं, उस पर आपका पूरा नियंत्रण और स्वामित्व है।
निष्कर्ष
यदि आप कोड स्निपेट के साथ Vue3 कैसे Vue 2 से अलग है, इस बारे में अधिक विस्तृत विवरण चाहते हैं, तो आप आधिकारिक Vue.js दस्तावेज़ीकरण के माध्यम से जा सकते हैं। हमने अधिकांश प्रमुख परिवर्तनों का उल्लेख किया है जिनके बारे में आपको अवगत होना चाहिए। यदि आप इस ढांचे के साथ एप्लिकेशन बनाने में रुचि रखते हैं, तो यह महत्वपूर्ण है कि आप Vue3 के अपडेट से अवगत रहें।
