💃🏿 👩🏽‍🎓 👶 जब फ्रंट-एंड डेवलपर को रिएक्ट से Vue पर स्विच करना चाहिए, और जब यह विकास को जटिल करेगा 🍤 🙌🏻 🐹

यदि आप यह पता लगाने की कोशिश कर रहे हैं कि चुनने के लिए इन दो महान रूपरेखाओं में से कौन सा है, तो इस मुद्दे पर Vue प्रस्तावक की राय पढ़ें , जिसका मैंने अनुवाद किया है और पूरक है। Mail.ru क्लाउड सॉल्यूशंस

क्लाउड प्लेटफ़ॉर्म से समर्थन के साथ अनुवादित ।

तो, आप एक रिएक्टर डेवलपर हैं और Vue को आज़माने का फैसला किया है। चलो शुरू करते हैं!

React और Vue दोनों कोका-कोला और पेप्सी हैं। आप रिएक्ट के साथ जो कर सकते हैं, उसमें से अधिकांश भी Vue के साथ किया जा सकता है। इसी समय, कई अंतर हैं, जिनमें से कुछ Vue पर कोणीय ढांचे के प्रभाव को दर्शाते हैं।

यह लेख मतभेदों पर केंद्रित है, इसलिए आप तुरंत Vue की दुनिया में उतरेंगे और लाभ देखेंगे।

रिएक्ट और व्यू में कितना अंतर है?

प्रतिक्रिया और Vue में अंतर की तुलना में अधिक समानताएं हैं:

UI बनाने के लिए ये दो लाइब्रेरी हैं;
तेज और हल्का दोनों;
एक घटक उन्मुख वास्तुकला है;
वर्चुअल डोम दृष्टिकोण का उपयोग करें;
दोनों को HTML फ़ाइल में या वेबपैक पर अधिक जटिल बिल्ड सिस्टम में एक मॉड्यूल के रूप में सीधे जोड़ा जा सकता है;
दोनों के पास अलग-अलग लेकिन व्यापक रूप से राउटिंग और राज्य प्रबंधन के लिए तीसरे पक्ष के पुस्तकालय हैं।

ध्यान देने योग्य अंतर यह है कि Vue आमतौर पर HTML टेम्पलेट फ़ाइलों का उपयोग करता है, और प्रतिक्रिया केवल जावास्क्रिप्ट फ़ाइलों का उपयोग करता है। Vue लाइब्रेरी में एक उत्परिवर्तनीय स्थिति और एक स्वचालित टेम्पलेट रिड्रा सिस्टम है जिसे "रिएक्टिविटी" कहा जाता है।

अवयव

Vue लाइब्रेरी में, एक API विधि का उपयोग करके घटकों को जोड़ा .componentजाता है जो id तर्कों और परिभाषा चर के साथ एक ऑब्जेक्ट लेता है। रिएक्टर डेवलपर संभवतः इस कोड में Vue घटकों को परिभाषित करने के परिचित और अपरिचित पहलुओं पर ध्यान देगा:

Vue.component('my-component', {
  //<strong> </strong> Props
  props: [ 'myprop' ],
  // <strong> </strong> Local state
  data() {
    return {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  // <strong>  </strong>Computed property
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  // <strong> </strong>Template
  template: `
    <div>
      <p>Vue components typically have string templates.
      <p>Here's some local state: {{ firstName }}
      <p>Here's a computed value: {{ fullName }}
      <p>Here's a prop passed down from the parent: {{ myprop }}
    </div>
  `,

  // <strong>    </strong>Lifecycle hook
  created() {
    setTimeout(() => {
      this.message = 'Goodbye World' 
    }, 2000);
  }
});

खाका

जैसा कि आप देख सकते हैं, घटक में एक संपत्ति है template, जो HTML मार्कअप के साथ एक स्ट्रिंग है। Vue लाइब्रेरी में एक संकलक शामिल होता है जो इस स्ट्रिंग को रनटाइम में रेंडर फ़ंक्शन में बदल देता है। ये रेंडरिंग फ़ंक्शन वर्चुअल DOM इंजन का उपयोग करते हैं।

आप संपत्ति का उपयोग नहीं कर सकते हैं templateयदि आप इसके बजाय अपना रेंडरिंग फ़ंक्शन बनाने का निर्णय लेते हैं। तुम भी प्रतिक्रिया दुनिया से JSX मार्कअप का उपयोग कर सकते हैं। लेकिन वीयू में स्विच करना और इस तरह से करना अजीब होगा - कैसे इटली में आना और पिज्जा को मना करना ...

जीवनचक्र के हुक

Vue घटकों की प्रतिक्रिया चक्र घटकों के समान जीवन चक्र विधियां होती हैं। उदाहरण के लिए, createdऊपर दिए गए उदाहरण से हुक तब शुरू होता है जब stateघटक की स्थिति ( ) तैयार होती है , लेकिन इससे पहले कि घटक पृष्ठ पर संलग्न हो जाए। दुनिया से प्रतिक्रिया - getDerivedStateFromProps।

लेकिन एक बड़ा अंतर है: वीयू लाइब्रेरी में रिएक्ट लाइब्रेरी का कोई एनालॉग नहीं है shouldComponentUpdate। वीयू रिएक्टिविटी सिस्टम के कारण यह आवश्यक नहीं है।

कंपोनेंट रिडर्विंग

एक घटक को इनिशियलाइज़ करने के चरणों में से एक इसके सभी गुणों को देखना और उन्हें गेटर्स और सेटर में बदलना है। जैसा कि आप देख सकते हैं, messageमूल डेटा ( props) से ली गई संपत्ति को दो अतिरिक्त तरीके प्राप्त हुए - getऔर set:

जब कोई प्रोग्राम पढ़ता है या उसे बदलता है, तो वेयू निर्भरता ट्रैकिंग और संपत्ति परिवर्तन सूचनाओं को सक्षम करने के लिए इन कार्यों को संलग्न करता है।

परस्पर अवस्था

Vue में स्थिति बदलने के लिए, आपको एक अलग विधि को कॉल करने की आवश्यकता नहीं है this.setState, जैसा कि रिएक्ट में किया गया है। आप सीधे परिवर्तन लिखते हैं:

// React
this.setState({ message: 'Hello World' });
// Vue
this.message = 'Hello World';

जब इस तरह से राज्य का मूल्य बदल दिया जाता है, तो setइस मूल्य की विधि शुरू हो जाती है (ऊपर देखें)। Setएक नया मान लिखता है, लेकिन उसके पास एक और कार्य भी है: वह पुस्तकालय को सूचित करता है कि यह ऐसा मूल्य है जो बदल गया है, और लेआउट का वह हिस्सा, जो राज्य में इस चर के मूल्य पर निर्भर करता है, को फिर से तैयार करने की आवश्यकता हो सकती है।

यदि चर को बाल घटकों में messageसंपत्ति ( prop) के रूप में आगे फेंक दिया जाता है , तो पुस्तकालय इसे याद रखता है, और बाल घटक भी स्वचालित रूप से फिर से तैयार किए जाएंगे। यही कारण है कि Vue पुस्तकालय को React के समान जीवन-चक्र विधि की आवश्यकता नहीं है shouldComponentUpdate।

मुख्य टेम्पलेट

मुख्य प्रोजेक्ट टेम्प्लेट फ़ाइल के बारे में, Vue को Angular अधिक पसंद है। जैसे रिएक्ट में, Vue टेम्पलेट को पृष्ठ पर कहीं आरोहित करने की आवश्यकता होती है:

<body>
  <div id="root"></div>
</body>

// React
ReactDOM.render('...', document.getElementById('root'));

// Vue
new Vue({
  el: '#root'
});

हालाँकि, प्रतिक्रिया के विपरीत, आप इस रूट तत्व में नियमित लेआउट जोड़ सकते हैं। यदि घटक को बढ़ते समय रिएक्ट तत्व के अंदर सब कुछ मिटा देता है #root, तो Vue बचाएगा:

<div id="root">
  <div>You can add more markup to index.html</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

रूट HTML फ़ाइल में x-टेम्पलेट या इनलाइन-टेम्पलेट जैसे रूट HTML फ़ाइल में बाल घटकों के टेम्पलेट्स को परिभाषित करने का एक तरीका भी है। यह सबसे अच्छा अभ्यास नहीं माना जाता है, क्योंकि यह पूरे घटक की परिभाषा से टेम्पलेट को एक पूरे के रूप में अलग करता है।

निर्देशों

फिर से, जैसा कि कोणीय में, Vue आपको "निर्देशों" के तर्क का उपयोग करके घटक की क्षमताओं का विस्तार करने की अनुमति देता है। एक उपसर्ग के साथ विशेष HTML विशेषताएँ हैं v-, उदाहरण के लिए, v-ifशर्तों के साथ प्रतिपादन या v-bindएक नियमित HTML विशेषता के लिए एक अभिव्यक्ति संलग्न करने के लिए:

new Vue({
  el: '#app',
  data: {
    mybool: true,
    myval: 'Hello World'
  }
});
<div id="app">
  <div v-if="mybool">This renders if mybool is truthy.</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

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

परियोजना संगठन

Vue लाइब्रेरी में प्रतिक्रिया-निर्माण-ऐप के बराबर कोई आधिकारिक नहीं है, हालांकि Vue डेवलपर समुदाय द्वारा बनाया गया एक बिल्ड है: create-vue-app।

Vue पर एक परियोजना शुरू करने के लिए आधिकारिक सिफारिश vue-cli है। यह एक साधारण परियोजना से एक HTML फ़ाइल के साथ पूरी तरह से पैक किए गए वेबपैक + सर्वर-साइड रेंडरिंग प्रोजेक्ट के लिए सब कुछ उत्पन्न कर सकता है:

$ vue init template-name project-name

एकल HTML फ़ाइल वाली परियोजनाएँ

Vue.js के निर्माता, इवान यू (आप यू शी पखिनिन) ने अपनी परियोजना को "एक प्रगतिशील ढांचा" कहा, क्योंकि इसे जटिल अनुप्रयोगों के लिए बढ़ाया जा सकता है या छोटे अनुप्रयोगों के लिए सरलीकृत किया जा सकता है।

बेशक, रिएक्ट वह भी कर सकता है। अंतर यह है कि Vue प्रोजेक्ट्स आम तौर पर कम ES6 सुविधाओं का उपयोग करते हैं और शायद ही कभी JSX का उपयोग करते हैं, इसलिए उन्हें Babel का उपयोग करके कोड को स्थानांतरित करने की आवश्यकता नहीं है। साथ ही, संपूर्ण Vue लाइब्रेरी एक फ़ाइल में फिट होती है, ReactDOM जैसे रिएक्ट समकक्षों के लिए अलग-अलग फाइलें नहीं हैं।

यहां Vue को एक एकल HTML फ़ाइल के साथ प्रोजेक्ट में जोड़ने का तरीका बताया गया है:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

जरूरी! यदि आप टेम्पलेट स्ट्रिंग्स का उपयोग नहीं करने जा रहे हैं और इसलिए, टेम्पलेट कंपाइलर की आवश्यकता नहीं है, तो लाइब्रेरी के सरलीकृत संस्करण का उपयोग करें जिसमें ये फ़ंक्शन नहीं हैं - vue.runtime.js। यह पूर्ण से लगभग 20 KB कम है।

एक फ़ाइल में घटक

यदि आप सौभाग्यशाली हैं कि वेबपैक जैसे उपकरणों का उपयोग करके अपनी परियोजना का निर्माण चरण जोड़ सकते हैं, तो आप Vue के सिंगल फाइल कंपोनेंट्स (SFC, Vue घटकों को एक ही फाइल में) का उपयोग कर सकते हैं। ये एक्सटेंशन के साथ फाइल हैं .vue, वे घटक टेम्पलेट, जेएस कॉन्फ़िगरेशन और शैलियों को एक फ़ाइल में एन्क्रिप्ट करते हैं:

<template>
  <div class="my-class">{{ message }}</div>
</template>
<script>
  export default {
    data() {
      message: 'Hello World'
    }
  }
</script>
<style>
  .my-class { font-weight: bold; }
</style>

यह, बिना किसी संदेह के, वीयू लाइब्रेरी की सबसे उल्लेखनीय विशेषताओं में से एक है, क्योंकि आपको सही HTML टेम्पलेट मिलता है, लेकिन जेएस लॉजिक वहीं, इसके ठीक बगल में है, और आपके पास प्रस्तुति और तर्क के लिए एक अलग वक्र नहीं है।

एक वेबपैक-लोडर है जिसे वीयू-लोडर कहा जाता है जो एसएफसी के निर्माण के लिए जिम्मेदार है। असेंबली प्रक्रिया के दौरान, टेम्प्लेट को एक रेंडरिंग फ़ंक्शन में परिवर्तित किया जाता है, और यह ब्राउज़र में स्ट्रिप-डाउन असेंबली vue.runtime.js का उपयोग करने के लिए आदर्श है।

Redux और बाकी

Vue में एक फ्लक्स-आधारित राज्य प्रबंधन पुस्तकालय है जिसे Vuex कहा जाता है। इस बार यह रेडक्स के समान है, लेकिन कुछ अंतर हैं।

रिएक्ट से Vue में स्विच करने पर डेवलपर को क्या मिलता है?

मुद्दे को पूरी तरह से समझने के लिए, मैंने लेख को पूरक किया और बताया कि रिएक्ट का चयन करना कब बेहतर है, और कब करना है।

Vue पर स्विच करने से नए लोगों के लिए प्रोजेक्ट में प्रवेश करना आसान हो सकता है। Vue टेम्पलेट को सीधे HTML में लिखा जा सकता है। इसके अलावा, छोटी परियोजनाओं के लिए, नवीनतम ES ++ फीचर्स को जानना और कोड असेंबली को वेबपैक और बैबेल जैसे टूल्स के माध्यम से कॉन्फ़िगर करना आवश्यक नहीं है। Vue के लिए कोड jQuery- शैली में लिखा जा सकता है, अर्थात् सीधे टेम्पलेट में।

Vue में एक सुविधाजनक आउट-ऑफ-बॉक्स स्थिति संदेश वितरण प्रणाली भी है। डेवलपर्स को एक अतुल्यकालिक विधि setState( प्रतिक्रिया में ) के रूप में कॉल करने या राज्य वितरण को नियंत्रित करने के लिए बाहरी पुस्तकालयों को जोड़ने की आवश्यकता नहीं है (जैसे कि Mobx )।

अंत में, Vue का उपयोग करते हुए लिखे गए अनुप्रयोगों को विशेष रूप से आसान किया जा सकता है: अक्सर केवल पुस्तकालय ही या यहां तक कि vue.runtime.js के इसके छीन-डाउन संस्करण की आवश्यकता होगी। जबकि रिएल पर आधुनिक विकास बाबेल और भारी बंडलों के बिना कई मेगाबाइट तक वजन के बिना लगभग असंभव है।

दूसरी ओर, Vue प्रोजेक्ट्स, बहुत अधिक जटिल हो सकते हैं यदि आपके पास क्लाइंट पर एक बड़ा एप्लिकेशन या जटिल तर्क है। यदि HTML टेम्पलेट में लेआउट किया जाता है, तो एप्लिकेशन के कुछ हिस्सों का परीक्षण करना अधिक कठिन हो जाता है। रिएक्ट, जो केवल जेएस कोड का उपयोग करता है, कोड के पुन: उपयोग और विस्तार के लिए अधिक सुविधाएँ प्रदान करता है। इसके अलावा, यदि आप रिएक्ट में लिखते हैं, तो आप बिना किसी खर्च के रिएक्ट-नेटिव का उपयोग करने वाले उपकरणों के लिए एप्लिकेशन लिखते समय अपने कोड का पुन: उपयोग कर सकते हैं। व्यू के साथ ऐसा नहीं है।

इसलिए, निष्कर्ष निम्नानुसार हो सकता है:

, , . ;
, : Vue, - React.

Mail.ru Cloud Solutions.

जब फ्रंट-एंड डेवलपर को रिएक्ट से Vue पर स्विच करना चाहिए, और जब यह विकास को जटिल करेगा