VueJS - अवलोकन

VueJSएक खुला स्रोत प्रगतिशील जावास्क्रिप्ट ढांचा है जिसका उपयोग इंटरैक्टिव वेब इंटरफेस विकसित करने के लिए किया जाता है। यह वेब विकास को सरल बनाने के लिए उपयोग किए जाने वाले प्रसिद्ध ढाँचों में से एक है। VueJS दृश्य परत पर ध्यान केंद्रित करता है। इसे बिना किसी मुद्दे के फ्रंट-एंड डेवलपमेंट के लिए बड़ी परियोजनाओं में आसानी से एकीकृत किया जा सकता है।

VueJS के लिए स्थापना के साथ शुरू करना बहुत आसान है। कोई भी डेवलपर समय के एक मामले में इंटरैक्टिव वेब इंटरफेस को आसानी से समझ और बना सकता है। VueJS Evan You, Google के एक पूर्व कर्मचारी द्वारा बनाया गया है। VueJS का पहला संस्करण फ़रवरी 2014 में जारी किया गया था। इसने हाल ही में GitHub पर 64,828 सितारों को देखा है, जो इसे बहुत लोकप्रिय बनाता है।

विशेषताएं

VueJS के साथ उपलब्ध विशेषताएं निम्नलिखित हैं।

वर्चुअल डोम

VueJS वर्चुअल DOM का उपयोग करता है, जिसका उपयोग अन्य फ्रेमवर्क जैसे कि React, Ember, आदि द्वारा भी किया जाता है। DOM में परिवर्तन नहीं किए जाते हैं, इसके बजाय DOM की प्रतिकृति बनाई जाती है जो कि जावास्क्रिप्ट डेटा संरचनाओं के रूप में मौजूद है। । जब भी कोई बदलाव किया जाना है, तो वे जावास्क्रिप्ट डेटा संरचनाओं में किए जाते हैं और बाद वाले की तुलना मूल डेटा संरचना के साथ की जाती है। अंतिम परिवर्तन तब वास्तविक DOM में अपडेट किए जाते हैं, जिसे उपयोगकर्ता बदलते हुए देखेगा। अनुकूलन के मामले में यह अच्छा है, यह कम खर्चीला है और इसमें बदलाव तेज गति से किए जा सकते हैं।

अनिवार्य तथ्य

डेटा बाइंडिंग फ़ीचर HTML विशेषताओं में मानों को हेरफेर या असाइन करने में मदद करता है, शैली को बदलता है, बाध्यकारी निर्देश की मदद से कक्षाएं असाइन करता है v-bind VueJS के साथ उपलब्ध है।

अवयव

घटक VueJS की महत्वपूर्ण विशेषताओं में से एक हैं जो कस्टम तत्वों को बनाने में मदद करते हैं, जिन्हें HTML में पुन: उपयोग किया जा सकता है।

घटना से निपटना

v-on VueJS में घटनाओं को सुनने के लिए DOM तत्वों में जोड़ा गया गुण है।

एनीमेशन / संक्रमण

VueJS HTML तत्वों में संक्रमण को लागू करने के लिए विभिन्न तरीके प्रदान करता है जब उन्हें DOM से जोड़ा / अपडेट या हटाया जाता है। VueJS में एक अंतर्निहित संक्रमण घटक होता है जिसे संक्रमण प्रभाव के लिए तत्व के चारों ओर लपेटना पड़ता है। हम आसानी से थर्ड पार्टी एनीमेशन लाइब्रेरी जोड़ सकते हैं और इंटरफ़ेस में अधिक अन्तरक्रियाशीलता भी जोड़ सकते हैं।

संगणित गुण

यह VueJS की महत्वपूर्ण विशेषताओं में से एक है। यह यूआई तत्वों में किए गए परिवर्तनों को सुनने में मदद करता है और आवश्यक गणना करता है। इसके लिए अतिरिक्त कोडिंग की आवश्यकता नहीं है।

टेम्पलेट्स

VueJS HTML-आधारित टेम्पलेट प्रदान करता है जो DOM को Vue उदाहरण डेटा के साथ बाँधता है। Vue टेम्पलेट को वर्चुअल DOM रेंडर कार्यों में संकलित करता है। हम रेंडर फ़ंक्शन के टेम्प्लेट का उपयोग कर सकते हैं और ऐसा करने के लिए हमें टेम्प्लेट को रेंडर फ़ंक्शन के साथ बदलना होगा।

निर्देशों

VueJS में वी-इफ, वी-वीनस, वी-शो, वी-ऑन, वी-बाइंड और वी-मॉडल जैसे अंतर्निहित निर्देश हैं, जिनका उपयोग फ्रंटेंड पर विभिन्न क्रियाओं को करने के लिए किया जाता है।

पर नजर रखने वालों

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

मार्ग

पन्नों के बीच नेविगेशन को vue-router की मदद से किया जाता है।

लाइटवेट

VueJS स्क्रिप्ट बहुत हल्की है और प्रदर्शन भी बहुत तेज़ है।

Vue-CLI

VueJS को कमांड लाइन पर vue-cli कमांड लाइन इंटरफेस का उपयोग करके स्थापित किया जा सकता है। यह vue-cli का उपयोग करके प्रोजेक्ट को आसानी से बनाने और संकलित करने में मदद करता है।

अन्य फ्रेमवर्क के साथ तुलना

अब हम VueJS की तुलना दूसरे फ्रेमवर्क जैसे रिएक्ट, एंगुलर, एम्बर, नॉकआउट और पॉलिमर से करते हैं।

VueJS v / s प्रतिक्रिया

Virtual DOM

वर्चुअल DOM, DOM ट्री का वर्चुअल प्रतिनिधित्व है। वर्चुअल DOM के साथ, एक जावास्क्रिप्ट ऑब्जेक्ट बनाया जाता है जो कि वास्तविक DOM के समान है। किसी भी समय DOM में बदलाव करने की आवश्यकता होती है, एक नया JavaScript ऑब्जेक्ट बनाया जाता है और परिवर्तन किए जाते हैं। बाद में, दोनों जावास्क्रिप्ट ऑब्जेक्ट्स की तुलना की जाती है और अंतिम परिवर्तन वास्तविक डोम में अपडेट किए जाते हैं।

VueJS और React दोनों वर्चुअल DOM का उपयोग करते हैं, जो इसे तेज बनाता है।

Template v/s JSX

VueJS html, js और css का अलग-अलग उपयोग करता है। एक शुरुआती के लिए VueJS शैली को समझना और अपनाना बहुत आसान है। VueJS के लिए टेम्पलेट आधारित दृष्टिकोण बहुत आसान है।

रिएक्ट jsx दृष्टिकोण का उपयोग करता है। सब कुछ ReactJS के लिए जावास्क्रिप्ट है। HTML और CSS जावास्क्रिप्ट के सभी भाग हैं।

Installation Tools

प्रतिक्रिया का उपयोग करता है create react app और VueJS का उपयोग करता है vue-cli /CDN/npm। दोनों का उपयोग करना बहुत आसान है और परियोजना सभी बुनियादी आवश्यकताओं के साथ स्थापित की गई है। रिएक्ट को बिल्ड के लिए वेबपैक चाहिए, जबकि वीयूजेएस नहीं। हम सीडी लाइब्रेरी के उपयोग से कहीं भी jsfiddle या कोडपेन में VueJS कोडिंग के साथ शुरू कर सकते हैं।

Popularity

प्रतिक्रिया VueJS की तुलना में लोकप्रिय है। रिएक्ट के साथ नौकरी का अवसर VueJS से अधिक है। रिएक्ट यानी फेसबुक के पीछे एक बड़ा नाम है जो इसे और लोकप्रिय बनाता है। चूंकि, React जावास्क्रिप्ट की मूल अवधारणा का उपयोग करता है, इसलिए यह जावास्क्रिप्ट का सबसे अच्छा अभ्यास करता है। जो प्रतिक्रिया के साथ काम करता है वह निश्चित रूप से सभी जावास्क्रिप्ट अवधारणाओं के साथ बहुत अच्छा होगा।

VueJS एक विकासशील ढांचा है। वर्तमान में, रिएक्ट की तुलना में VueJS के साथ नौकरी के अवसर कम हैं। एक सर्वेक्षण के अनुसार, बहुत से लोग VueJS को अपना रहे हैं, जो प्रतिक्रिया और कोणीय की तुलना में इसे अधिक लोकप्रिय बना सकता है। VueJS की विभिन्न विशेषताओं पर एक अच्छा समुदाय काम कर रहा है। इस समुदाय द्वारा नियमित अपडेट के साथ वी-राउटर बनाए रखा जाता है।

VueJS ने एंगुलर और रिएक्ट से अच्छे हिस्सों को लिया है और एक शक्तिशाली पुस्तकालय बनाया है। VueJS अपनी हल्की लाइब्रेरी की वजह से React / Angular की तुलना में बहुत तेज है।

VueJS v / s कोणीय

Similarities

VueJS में एंगुलर के साथ काफी समानताएं हैं। V-if जैसे निर्देश, v-for लगभग ngIf के समान हैं, कोणीय के ngFor। उन दोनों के पास प्रोजेक्ट इंस्टॉलेशन के लिए कमांड लाइन इंटरफेस है और इसे बनाने के लिए। VueJS Vue-cli का उपयोग करता है और Angular कोणीय-cli का उपयोग करता है। दोनों दो तरह से डेटा बाइंडिंग, सर्वर साइड रेंडरिंग आदि की पेशकश करते हैं।

Complexity

Vuejs सीखना और शुरू करना बहुत आसान है। जैसा कि पहले चर्चा की गई है, एक शुरुआत VueJS की CDN लाइब्रेरी ले सकती है और कोडपेन और jsfiddle में शुरू हो सकती है।

कोणीय के लिए, हमें स्थापना के लिए चरणों की एक श्रृंखला से गुजरना होगा और शुरुआती लोगों के लिए कोणीय के साथ शुरू करना थोड़ा मुश्किल है। यह कोडिंग के लिए टाइपस्क्रिप्ट का उपयोग करता है जो कोर जावास्क्रिप्ट पृष्ठभूमि से आने वाले लोगों के लिए मुश्किल है। हालाँकि, जावा और C # बैकग्राउंड के उपयोगकर्ताओं के लिए सीखना आसान है।

Performance

प्रदर्शन तय करने के लिए, यह उपयोगकर्ताओं पर निर्भर है। VueJS फ़ाइल का आकार कोणीय की तुलना में बहुत हल्का है। निम्नलिखित लिंक में फ्रेमवर्क प्रदर्शन की तुलना प्रदान की गई हैhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

वर्तमान में, कोणीय VueJS की तुलना में अधिक लोकप्रिय है। बहुत सारे संगठन एंगुलर का उपयोग करते हैं, जिससे यह बहुत लोकप्रिय हो जाता है। एंगुलर में अनुभवी उम्मीदवारों के लिए नौकरी के अवसर भी अधिक हैं। हालाँकि, VueJS बाज़ार में जगह बना रहा है और इसे Angular और React के लिए एक अच्छा प्रतियोगी माना जा सकता है।

Dependencies

कोणीय बहुत सारी अंतर्निहित सुविधाएँ प्रदान करता है। हमें आवश्यक मॉड्यूल आयात करना होगा और इसके साथ शुरू करना होगा, उदाहरण के लिए, @ कोणीय / एनिमेशन, @ कोणीय / रूप।

VueJS में कोणीय के रूप में सभी अंतर्निहित विशेषताएं नहीं हैं और इस पर काम करने के लिए तीसरे पक्ष के पुस्तकालयों पर निर्भर रहने की आवश्यकता है।

Flexibility

VueJS को बिना किसी मुद्दे के आसानी से किसी अन्य बड़ी परियोजना के साथ विलय किया जा सकता है। कोणीय किसी अन्य मौजूदा परियोजना के साथ काम करना शुरू करना आसान नहीं होगा।

Backward Compatibility

हमारे पास AngularJS, Angular2 और अब Angular4 था। AngularJS और Angular2 में बहुत अंतर है। मुख्य अंतर के कारण AngularJS में विकसित प्रोजेक्ट एप्लिकेशन को Angular2 में परिवर्तित नहीं किया जा सकता है।

VueJS का हालिया संस्करण 2.0 है और यह पिछड़े संगतता के साथ अच्छा है। यह अच्छा प्रलेखन प्रदान करता है, जिसे समझना बहुत आसान है।

Typescript

कोणीय कोडिंग के लिए टाइपस्क्रिप्ट का उपयोग करता है। उपयोगकर्ताओं को कोणीय के साथ आरंभ करने के लिए टाइपस्क्रिप्ट का ज्ञान होना आवश्यक है। हालाँकि, हम VsJS से कोडिंग लाइब्रेरी का उपयोग करके कहीं भी jsfiddle या कोडपेन में कोडिंग कर सकते हैं। हम मानक जावास्क्रिप्ट के साथ काम कर सकते हैं, जिसे शुरू करना बहुत आसान है।

VueJS v / s एम्बर

Similarities

एम्बर एम्बर परियोजनाओं के लिए आसान स्थापना और संकलन के लिए एम्बर कमांड लाइन टूल, यानी एम्बर-क्ली प्रदान करता है।

VueJS में परियोजनाओं को शुरू करने और बनाने के लिए एक कमांड लाइन उपकरण vue-cli भी है।

इन दोनों में राउटर, टेम्प्लेट और कंपोनेंट जैसे फीचर्स हैं, जो यूआई फ्रेमवर्क के रूप में बहुत समृद्ध हैं।

Performance

VueJS ने एम्बर की तुलना में बेहतर प्रदर्शन किया है। एम्बर ने पुन: रेंडर प्रदर्शन को बेहतर बनाने के उद्देश्य से एक झिलमिलाता रेंडरिंग इंजन जोड़ा है, जो कि वर्चुअल डोम का उपयोग करके वीयूजेएस और रिएक्ट के समान अवधारणा है। हालांकि, Ember की तुलना में VueJS का बेहतर प्रदर्शन है।

VueJS v / s नॉकआउट

नॉकआउट एक अच्छा ब्राउज़र समर्थन प्रदान करता है। यह IE के निचले संस्करण पर समर्थित है जबकि VueJS IE8 और उससे नीचे पर समर्थित नहीं है। समय के साथ नॉकआउट विकास धीमा हो गया है। हाल के दिनों में इसके लिए बहुत लोकप्रियता नहीं है।

दूसरी ओर, VueJS ने नियमित अपडेट प्रदान करने वाली Vue टीम के साथ लोकप्रियता हासिल करना शुरू कर दिया है।

VueJS v / s पॉलिमर

पॉलिमर लाइब्रेरी को Google द्वारा विकसित किया गया है। यह Google I / O, Google Earth, Google Play Music आदि जैसी कई Google परियोजनाओं में उपयोग किया जाता है। यह VueJS के समान डेटा बाइंडिंग और गणना किए गए गुण प्रदान करता है।

पॉलिमर कस्टम एलिमेंट डेफिनिशन में सादा जावास्क्रिप्ट / सीएसएस, एलिमेंट प्रॉपर्टीज, लाइफसाइकल कॉलबैक और जावास्क्रिप्ट मेथड शामिल हैं। इसकी तुलना में, VueJS आसानी से जावास्क्रिप्ट / html और सीएसएस का उपयोग करने की अनुमति देता है।

पॉलिमर वेब घटक सुविधाओं का उपयोग करता है और ब्राउज़र के लिए पॉलीफिल की आवश्यकता होती है, जो इन सुविधाओं का समर्थन नहीं करता है। VueJS में ऐसी निर्भरता नहीं है और IE9 + से सभी ब्राउज़रों में ठीक काम करता है।