Vue.js: 3 विरोधी पैटर्न

Vue.js शायद सबसे अच्छे जावास्क्रिप्ट फ्रेमवर्क में से एक है। इसमें एक सहज ज्ञान युक्त एपीआई है, यह तेज, लचीला और उपयोग में आसान है। हालाँकि, Vue.js का लचीलापन कुछ खतरों के साथ आता है। इस ढांचे के साथ काम करने वाले कुछ डेवलपर्स छोटे ओवरसाइट के लिए प्रवण हैं। यह अनुप्रयोग प्रदर्शन को प्रतिकूल रूप से प्रभावित कर सकता है, या, लंबे समय में, उनका समर्थन करने की क्षमता।



सामग्री का लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, जो V.ss.s.s पर एप्लिकेशन विकसित करने वालों द्वारा की गई कुछ सामान्य गलतियों को पार्स करने की पेशकश करता है।

संगणित गुणों के अंदर दुष्प्रभाव

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

export default {   data() {     return {       array: [1, 2, 3]     };   },   computed: {     reversedArray() {       return this.array.reverse(); //   -         }   } }; 

यदि हम array को प्रिंट करने और reversedArray प्रयास करते हैं, तो हम देखेंगे कि दोनों सरणियों में समान मान हैं।

  : [ 3, 2, 1 ]  : [ 3, 2, 1 ] 

इसका कारण यह है कि गणना की गई reversedArray .reverse() प्रॉपर्टी अपनी .reverse() विधि को कॉल करके मूल array संपत्ति को संशोधित करती है। यह एक काफी सरल उदाहरण है जो अप्रत्याशित प्रणाली व्यवहार को प्रदर्शित करता है। एक और उदाहरण देखिए।

मान लीजिए हमारे पास एक घटक है जो एक निश्चित क्रम में शामिल वस्तुओं या सेवाओं की कीमत के बारे में विस्तृत जानकारी प्रदर्शित करता है।

 export default {  props: {    order: {      type: Object,      default: () => ({})    }  },  computed:{    grandTotal() {      let total = (this.order.total + this.order.tax) * (1 - this.order.discount);      this.$emit('total-change', total)      return total.toFixed(2);    }  } } 

यहां हमने एक गणना की गई संपत्ति बनाई है जो करों और छूट सहित आदेश की कुल लागत को प्रदर्शित करता है। चूँकि हम जानते हैं कि कुल ऑर्डर वैल्यू यहाँ बदल रही है, हम एक ऐसी घटना को उठाने की कोशिश कर सकते हैं जो एक grandTotal परिवर्तन के मूल घटक को सूचित करती है।

 <price-details :order="order"               @total-change="totalChange"> </price-details> export default {  //        methods: {    totalChange(grandTotal) {      if (this.isSpecialCustomer) {        this.order = {          ...this.order,          discount: this.order.discount + 0.1        };      }    }  } }; 

अब कल्पना करें कि कभी-कभी, हालांकि बहुत कम ही, ऐसी स्थितियां उत्पन्न होती हैं जिनमें हम विशेष ग्राहकों के साथ काम करते हैं। हम इन ग्राहकों को 10% की अतिरिक्त छूट देते हैं। हम order ऑब्जेक्ट को बदलने की कोशिश कर सकते हैं और इसकी discount संपत्ति में 0.1 जोड़कर छूट का आकार बढ़ा सकते हैं।

यह, हालांकि, एक गलत गलती को जन्म देगा।


त्रुटि संदेश


एक विशेष ग्राहक के लिए गलत आदेश मूल्य गणना

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

यह आपको प्रतीत हो सकता है कि इस तरह की गलती वास्तविक आवेदन में नहीं की जा सकती है। लेकिन क्या वास्तव में ऐसा है? हमारी स्क्रिप्ट (यदि इस ऐप्लिकेशन में ऐसा कुछ होता है) को डीबग करना बहुत मुश्किल होगा। ऐसी गलती को ट्रैक करना बेहद मुश्किल होगा। तथ्य यह है कि इस त्रुटि के लिए, यह आवश्यक है कि ऑर्डर एक विशेष खरीदार द्वारा किया जाता है, और इस तरह के एक आदेश में 1000 नियमित ऑर्डर हो सकते हैं।

नेस्टेड गुण बदलना

कभी-कभी किसी डेवलपर को props से एक संपत्ति में कुछ संपादित करने के लिए लुभाया जा सकता है, जो एक वस्तु या एक सरणी है। इस तरह की इच्छा को इस तथ्य से तय किया जा सकता है कि यह करना बहुत "सरल" है। लेकिन क्या यह इसके लायक है? एक उदाहरण पर विचार करें।

 <template>  <div class="hello">    <div>Name: {{product.name}}</div>    <div>Price: {{product.price}}</div>    <div>Stock: {{product.stock}}</div>    <button @click="addToCart" :disabled="product.stock <= 0">Add to card</button>  </div> </template> export default {  name: "HelloWorld",  props: {    product: {      type: Object,      default: () => ({})    }  },  methods: {    addToCart() {      if (this.product.stock > 0) {        this.$emit("add-to-cart");        this.product.stock--;      }    }  } }; 

यहां हमारे पास Product.vue घटक है, जो उत्पाद का नाम, उसका मूल्य और हमारे पास माल की मात्रा प्रदर्शित करता है। घटक एक बटन भी प्रदर्शित करता है जो खरीदार को टोकरी में सामान रखने की अनुमति देता है। ऐसा लग सकता है कि बटन पर क्लिक करने के बाद product.stock के मूल्य को कम करने के लिए यह बहुत आसान और सुविधाजनक होगा। ऐसा करना वास्तव में सरल है। लेकिन अगर आप ऐसा करते हैं, तो आपको कई समस्याओं का सामना करना पड़ सकता है:

• हम संपत्ति का एक परिवर्तन (म्यूटेशन) करते हैं और मूल इकाई के लिए कुछ भी रिपोर्ट नहीं करते हैं।
• यह अनपेक्षित त्रुटियों के प्रकटन के लिए अप्रत्याशित प्रणाली व्यवहार, या इससे भी बदतर हो सकता है।
• हम product घटक में कुछ तर्क पेश करते हैं, जो शायद इसमें मौजूद नहीं होना चाहिए।

एक काल्पनिक स्थिति की कल्पना करें जिसमें एक अन्य डेवलपर पहले हमारे कोड का सामना करता है और मूल घटक को देखता है।

 <template>   <Product :product="product" @add-to-cart="addProductToCart(product)"></Product> </template> import Product from "./components/Product"; export default {  name: "App",  components: {    Product  },  data() {    return {      product: {        name: "Laptop",        price: 1250,        stock: 2      }    };  },  methods: {    addProductToCart(product) {      if (product.stock > 0) {        product.stock--;      }    }  } }; 

इस डेवलपर की सोच इस प्रकार हो सकती है: "जाहिर तौर पर, मुझे addProductToCart विधि में product.stock को कम करने की आवश्यकता है addProductToCart " लेकिन अगर ऐसा किया जाता है, तो हम एक छोटी सी गलती का सामना करेंगे। यदि अब बटन दबाते हैं, तो माल की मात्रा 1 से कम नहीं होगी, बल्कि 2 से कम हो जाएगी।

कल्पना करें कि यह एक विशेष मामला है जब ऐसा चेक केवल दुर्लभ वस्तुओं के लिए या विशेष छूट की उपलब्धता के संबंध में किया जाता है। यदि यह कोड उत्पादन में आता है, तो सब कुछ इस तथ्य से समाप्त हो सकता है कि हमारे ग्राहक उत्पाद की 1 प्रति के बजाय, 2 प्रतियां खरीदेंगे।

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

 //   <template>  <div>    <span> Email {{user.email}}</span>    <span> Name {{user.name}}</span>    <user-form :user="user" @submit="updateUser"/>  </div> </template> import UserForm from "./UserForm" export default {  components: {UserForm},  data() {   return {     user: {      email: 'loreipsum@email.com',      name: 'Lorem Ipsum'     }   }  },  methods: {    updateUser() {     //            }  } } //   UserForm.vue <template>  <div>   <input placeholder="Email" type="email" v-model="user.email"/>   <input placeholder="Name" v-model="user.name"/>   <button @click="$emit('submit')">Save</button>  </div> </template> export default {  props: {    user: {     type: Object,     default: () => ({})    }  } } 

v-model निर्देश का उपयोग करके user साथ शुरुआत करना आसान है। Vue.js यह अनुमति देता है। सिर्फ इतना ही क्यों नहीं? इसके बारे में सोचो:

• क्या होगा अगर कोई आवश्यकता है जिसे आपको फॉर्म में एक रद्द करें बटन जोड़ने की आवश्यकता है, जिस पर क्लिक करके किए गए परिवर्तनों को रद्द कर सकते हैं?
• यदि सर्वर कॉल विफल हो जाए तो क्या होगा? user ऑब्जेक्ट को पूर्ववत कैसे करें?
• क्या हम वास्तव में संबंधित परिवर्तनों को सहेजने से पहले मूल घटक में परिवर्तित नाम और ईमेल पता प्रदर्शित करना चाहते हैं?

समस्या को "ठीक" करने का एक सरल तरीका यह है कि संपत्ति के रूप में भेजने से पहले user ऑब्जेक्ट को क्लोन किया जाए:

 <user-form :user="{...user}"> 

हालांकि यह काम कर सकता है, हम केवल समस्या को दरकिनार करते हैं, लेकिन इसे हल नहीं करते हैं। हमारे UserForm घटक का अपना स्थानीय राज्य होना चाहिए। यहाँ हम क्या कर सकते हैं।

 <template>  <div>   <input placeholder="Email" type="email" v-model="form.email"/>   <input placeholder="Name" v-model="form.name"/>   <button @click="onSave">Save</button>   <button @click="onCancel">Save</button>  </div> </template> export default {  props: {    user: {     type: Object,     default: () => ({})    }  },  data() {   return {    form: {}   }  },  methods: {   onSave() {    this.$emit('submit', this.form)   },   onCancel() {    this.form = {...this.user}    this.$emit('cancel')   }  }  watch: {    user: {     immediate: true,     handler: function(userFromProps){      if(userFromProps){        this.form = {          ...this.form,          ...userFromProps        }      }     }    }  } } 

हालांकि यह कोड निश्चित रूप से जटिल लगता है, लेकिन यह पिछले संस्करण की तुलना में बेहतर है। यह आपको उपरोक्त समस्याओं से छुटकारा पाने की अनुमति देता है। हम user संपत्ति में परिवर्तन ( watch ) की उम्मीद करते हैं और इसे आंतरिक form डेटा में कॉपी करते हैं। नतीजतन, अब फॉर्म की अपनी स्थिति है, और हम निम्नलिखित विशेषताएं प्राप्त करते हैं:

• आप प्रपत्र को पुन: असाइन करके परिवर्तनों को पूर्ववत कर सकते हैं: यह this.form = {...this.user} ।
• हमारे पास फॉर्म के लिए एक अलग राज्य है।
• हमारे कार्यों की घटना में मूल घटक को प्रभावित नहीं करता है कि हमें इसकी आवश्यकता नहीं है।
• जब हम परिवर्तनों को सहेजने का प्रयास करते हैं तो हम नियंत्रित करते हैं।

मूल घटकों तक सीधी पहुँच

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

एक बहुत ही सरल उदाहरण पर विचार करें - एक घटक जो ड्रॉप-डाउन मेनू को लागू करता है। कल्पना कीजिए कि हमारे पास एक dropdown घटक (माता dropdown-menu पिता) और एक dropdown-menu घटक (बच्चा) है। जब उपयोगकर्ता एक निश्चित मेनू आइटम पर क्लिक करता है, तो हमें dropdown-menu को बंद करना होगा। इस घटक को छिपाना और दिखाना dropdown के मूल घटक द्वारा किया जाता है। एक उदाहरण देखें।

 // Dropdown.vue ( ) <template>  <div>    <button @click="showMenu = !showMenu">Click me</button>    <dropdown-menu v-if="showMenu" :items="items"></dropdown-menu>  </div> <template> export default {  props: {   items: Array  },  data() {   return {     selectedOption: null,     showMenu: false   }  } } // DropdownMenu.vue ( ) <template>  <ul>    <li v-for="item in items" @click="selectOption(item)">{{item.name}}</li>  </ul> <template> export default {  props: {   items: Array  },  methods: {    selectOption(item) {     this.$parent.selectedOption = item     this.$parent.showMenu = false    }  } } 

selectOption विधि पर ध्यान selectOption । हालाँकि ऐसा बहुत कम ही होता है, कोई व्यक्ति सीधे तौर पर $parent संपर्क करना चाहता है। इस इच्छा को इस तथ्य से समझाया जा सकता है कि यह करना बहुत सरल है।

पहली नज़र में, ऐसा लग सकता है कि ऐसा कोड सही तरीके से काम करता है। लेकिन यहाँ आप कुछ समस्याओं को देख सकते हैं:

• यदि हम showMenu या selectedOption संपत्ति को बदल दें तो क्या होगा? ड्रॉपडाउन मेनू बंद नहीं हो पाएगा और इसके किसी भी आइटम का चयन नहीं किया जाएगा।
• क्या होगा यदि आपको किसी प्रकार के संक्रमण का उपयोग करते हुए dropdown-menu को चेतन करने की आवश्यकता है?

 // Dropdown.vue ( ) <template>  <div>    <button @click="showMenu = !showMenu">Click me</button>    <transition name="fade">      <dropdown-menu v-if="showMenu" :items="items"></dropdown-menu>    </dropdown-menu>  </div> <template> 

$parent में बदलाव के कारण यह कोड, फिर से काम नहीं करेगा। dropdown घटक अब dropdown-menu का जनक नहीं है। अब dropdown-menu पैरेंट transition घटक है।

गुणों को घटक पदानुक्रम से नीचे पारित किया जाता है, घटनाओं को पारित किया जाता है। इन शब्दों में हमारी समस्या को हल करने के लिए सही दृष्टिकोण का अर्थ है। यहां घटनाओं के लिए एक उदाहरण संशोधित किया गया है।

 // Dropdown.vue ( ) <template>  <div>    <button @click="showMenu = !showMenu">Click me</button>    <dropdown-menu v-if="showMenu" :items="items" @select-option="onOptionSelected"></dropdown-menu>  </div> <template> export default {  props: {   items: Array  },  data() {   return {     selectedOption: null,     showMenu: false   }  },  methods: {    onOptionSelected(option) {      this.selectedOption = option      this.showMenu = true    }  } } // DropdownMenu.vue ( ) <template>  <ul>    <li v-for="item in items" @click="selectOption(item)">{{item.name}}</li>  </ul> </template> export default {  props: {   items: Array  },  methods: {    selectOption(item) {     this.$emit('select-option', item)    }  } } 

अब, घटनाओं के उपयोग के लिए धन्यवाद, बाल घटक अब मूल घटक से बाध्य नहीं है। हम मूल घटक में डेटा के साथ गुणों को स्वतंत्र रूप से बदल सकते हैं और एनिमेटेड बदलावों का उपयोग कर सकते हैं। हालाँकि, हम यह नहीं सोच सकते कि हमारा कोड मूल घटक को कैसे प्रभावित कर सकता है। हम बस इस घटक को सूचित करते हैं कि क्या हुआ। इस मामले में, dropdown घटक खुद ही निर्णय लेता है कि उपयोगकर्ता को मेनू आइटम को कैसे चुनना है और मेनू को बंद करने का संचालन कैसे करना है।

परिणाम

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

प्रिय पाठकों! क्या आपने अभ्यास में कोई परेशानी का सामना किया है, जैसे कि इस लेख में चर्चा की गई है?