Vue.js कम्प्यूटेड प्रॉपर्टीज़ के लिए एक सरल गाइड

Vue.js computed Properties ​​नामक एक शक्तिशाली सुविधा प्रदान करता है जो आपको गणना करने और अपने घटक की स्थिति से डेटा प्राप्त करने की अनुमति देता है। जब आप अपने टेम्पलेट कोड को साफ और पठनीय रखते हुए प्रतिक्रियाशील डेटा गुणों के आधार पर जटिल गणना या परिवर्तन करना चाहते हैं, तो कंप्यूटेड गुण विशेष रूप से उपयोगी होते हैं।

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

गणनाकृत गुण क्या हैं?

गणना किए गए गुण, Vue घटक के computed ऑब्जेक्ट के भीतर परिभाषित फ़ंक्शन हैं। विधियों के विपरीत, गणना किए गए गुण उनकी निर्भरता के आधार पर कैश किए जाते हैं। इसका मतलब है कि वे केवल तभी पुनर्मूल्यांकन करेंगे जब उनकी निर्भरता में से कोई एक बदल जाएगा, जिससे वे महंगे ऑपरेशन के लिए अधिक कुशल बनेंगे।

यहाँ एक कम्प्यूटेड प्रॉपर्टी का उपयोग करने वाले Vue घटक का एक मूल उदाहरण दिया गया है:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

इस उदाहरण में, fullName कंप्यूटेड प्रॉपर्टी firstName और lastName डेटा प्रॉपर्टी को मिलाकर पूरा नाम लौटाती है। चूँकि fullName एक कंप्यूटेड प्रॉपर्टी है, इसलिए जब भी firstName या lastName में बदलाव होगा, तो यह अपने आप अपडेट हो जाएगा।

गणना गुण बनाम विधियाँ

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

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

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

गणना किए गए गुणों के साथ गेटर्स और सेटर्स का उपयोग करना

गणना किए गए गुणों में getters ​​और setters ​​भी हो सकते हैं। डिफ़ॉल्ट रूप से, गणना किए गए गुणों में केवल एक गेट्टर होता है, लेकिन आप डेटा अपडेट को संभालने के लिए एक सेटर जोड़ सकते हैं।

यहां गेट्टर और सेटर दोनों के साथ गणना की गई संपत्ति का एक उदाहरण दिया गया है:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

इस उदाहरण में, fullName संगणित गुण में एक गेट्टर है जो पूरा नाम लौटाता है और एक सेटर है जो प्रविष्ट नाम को विभाजित करता है और firstName तथा lastName डेटा गुणों को अद्यतन करता है।

गणना गुणों में प्रतिक्रियाशीलता

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

इस प्रतिक्रियाशीलता को प्रदर्शित करने वाला एक उदाहरण यहां दिया गया है:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

इस उदाहरण में, जब बटन पर क्लिक किया जाता है, तो firstName को "Jane" में बदल दिया जाता है, और fullName की गणना की गई संपत्ति स्वचालित रूप से "Jane Doe" में अपडेट हो जाती है।

गणना किए गए गुणों का उपयोग करने के लिए सर्वोत्तम अभ्यास

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

निष्कर्ष

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