हमारे ऐप से नमूना Vue.js फ्लैशकार्ड्स

अधिक मुफ्त फ़्लैशकार्ड प्राप्त करने के लिए या सभी फ़्लैशकार्ड तक पहुँच के लिए हमारे एप्लिकेशन को App Store या Google Play से डाउनलोड करें या सदस्यता लें।

Vue.js में फंक्शनल कॉम्पोनेंट्स को कैसे बनाया जाता है और उनका क्या उपयोग हो सकता है?

Vue.js में फंक्शनल कॉम्पोनेंट्स वे कॉम्पोनेंट्स होते हैं जिनके पास इंस्टेंस या स्टेट नहीं होता है। वे तेजी से टेम्पलेट रेंडरिंग और अधिक कुशल एप्लीकेशन परफॉरमेंस के लिए उपयोग किए जाते हैं। फंक्शनल कॉम्पोनेंट तब अनुकूल होते हैं जब हमें केवल इनपुट डेटा को प्रदर्शित करने की आवश्यकता होती है और हमें 'created', 'mounted' आदि जैसे कॉम्पोनेंट लाइफ साइकिल के तरीकों की आवश्यकता नहीं होती है।

एक फ़ंक्शनल कॉम्पोनेंट बनाना सरल है। हम टेम्पलेट में फ़ंक्शनल निर्देशन का उपयोग करेंगे ताकि कॉम्पोनेंट को फ़ंक्शनल मार्क किया जा सके। फ़ंक्शनल कॉम्पोनेंट्स को हमेशा एक एकल मूल तत्व की आवश्यकता होती है।

यहां एक फ़ंक्शनल कॉम्पोनेंट का उदाहरण है:

<template functional>
    <div>
        <h1>{{ props.title }}</h1>
        <p>{{ props.content }}</p>
    </div>
</template>
<script>
export default {
    props: ['title', 'content']
}
</script>

ध्यान दें कि `props` वेरिएबल सीधे टेम्पलेट के अंदर उपलब्ध होता है। हम `this` कीवर्ड का उपयोग नहीं करते हैं क्योंकि फ़ंक्शनल कॉम्पोनेंट्स के पास इंस्टेंस नहीं होते हैं।

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

Vue.js डेटा रिएक्टिविटी को कैसे संभालता है और यह एप्लिकेशन की परफॉरमेंस पर कैसे प्रभाव डालता है?

Vue.js तथा-कथित आबजर्वर्स के माध्यम से डेटा प्रतिक्रियाशीलता का समर्थन करता है। जब हम एक Vue इंस्टेंस बनाते हैं और उससे एक डेटा ऑब्जेक्ट पास करते हैं, तो Vue.js हर एक डेटा फ़ील्ड के माध्यम से जाता है और उन्हें Object.defineProperty के उपयोग से "getters" और "setters" में बदल देता है।

जबकि getter मूल्य में कोई बदलाव नहीं करता, सेटर एक variable's मूल्य में बदलाव का पता लगाने में सक्षम होता है। जब सेटर का पता चलता है कि बदलाव हुए हैं, तो इसने आबजर्वर्स को सूचित किया, जो फिर दृश्य को अपडेट करते हैं।

// सरल डेटा ऑब्जेक्ट उदाहरण
var vm = new Vue({
  data: {
    message: 'Hello world'
  }
})

उपरी कोड में, "message" फ़ील्ड को Vue.js की प्रतिक्रियाशीलता का लाभ उठाने के लिए परिवर्तित किया जाता है। जब getter "message" में किसी भी परिवर्तन का पता लगाता है, तो दर्शक को सूचित किया जाता है और स्वचालित रूप से दृश्य को अपडेट करता है।

प्रदर्शन के हिसाब से, Vue.js में प्रतिक्रियाशीलता पुरी तरह से अनुकूलित की जाती है ताकि दृश्य का सुचारु अपडेट सुनिश्चित किया जा सके, जबकि अनावश्यक संचालन की संख्या को कम करना। Vue असमग्र "tick" संचालन में दृश्य को अपडेट करने के लिए परिवर्तनों को एकत्रित करने के लिए तालाबद्ध कतारबद्धी का उपयोग करता है। यह एक ही स्थिति के कोड की बार-बार ताजगी को रोकता है और प्रदर्शन को बढ़ाता है।

Vue CLI क्या है और इसके मुख्य कार्य क्या हैं?

Vue CLI एक Vue.js कमांड-लाइन टूल है जो नई प्रोजेक्ट्स की त्वरित निर्माण और कन्फिगरेशन की अनुमति देता है। यह ऐसी सुविधाओं की एक श्रृंखला प्रदान करता है जो Vue.js ऐप विकास प्रक्रिया को महत्वपूर्ण रूप से सरल और त्वरित करती है।

Vue CLI की प्रमुख सुविधाएँ निम्नलिखित हैं:

प्रोजेक्ट निर्माण और कॉन्फ़िगरेशन - Vue CLI Vue.js प्रोजेक्ट्स को एक पूर्व-कन्फिगरेशन विकास वातावरण के साथ उत्पन्न करने की अनुमति देता है। यह अधिकांश प्रोजेक्ट्स के लिए अनुकूल स्वतः कॉन्फ़िगरेशन शामिल करता है, लेकिन यह व्यक्तिगत सेटिंग समायोजनों की भी अनुमति देता है।

हॉट-रीलोडिंग - हॉट-रीलोडिंग एक सुविधा है जो कोड में किए गए परिवर्तनों के बाद स्वचालित रूप से पृष्ठ को ताजगी देती है। यह डेवलपर के काम की कुशलता को महत्वपूर्ण रूप से सुधारती है।

लिंटिंग और परीक्षण - Vue CLI में ESLint और विभिन्न इकाई और एकीकरण परीक्षणों के लिए कन्फिगरेशन शामिल है।

उत्पादन बिल्ड का समर्थन - यह टूल प्रदर्शन के लिए अनुकूलित प्रोडक्शन संस्करण के लिए कोड की तैयारी कर सकता है।

बहुभाषी एप्लिकेशन विकास की सुविधा - Vue I18n समर्थन के कारण, Vue CLI बहुभाषी अनुप्रयोगों की सृजन की सुविधा देता है।

प्रीप्रोसेसर का समर्थन - Vue CLI बाबेल, TypeScript, ESLint, PostCSS, PWA, यूनिट टेस्टिंग और एंड-टू-एंड टेस्टिंग जैसे प्रीप्रोसेसर का समर्थन करता है।

Vue CLI के साथ एक सरल प्रोजेक्ट प्रारंभिकरण निम्नलिखित होता है:

# स्थापना
npm install -g @vue/cli
# या
yarn global add @vue/cli

# नया प्रोजेक्ट बनाना
vue create my-project

Vue.js में कंप्यूटेड प्रॉपर्टीज और वॉचर्स में क्या अंतर है?

**संगणित गुण** और **निगरानी** तभी कुछ कार्य करने की अनुमति देते हैं जब Vue.js कौम्पोनॅन्ट में एक गुण का मान बदल जाता है। उनमें कुछ समानताएं होने के बावजूद, उनके बीच महत्वपूर्ण अंतर हैं।

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

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

वहीं **निगरानी**, दूसरी ओर, अधिक सामान्य होती हैं। वे किसी भी कौम्पोनॅन्ट गुण को निगरानी करने और उनके बदलने पर प्रतिक्रिया करने की अनुमति देते हैं।
निगरानी केवल तब निष्पादित होती है जब निगरानीय गुण बदलता है। वे विशेष रूप से उपयोगी होते हैं जब हमें एक ही गुण के बदलाव की निगरानी करनी होती है।

watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}

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

Vue.js फ्लैशकार्ड्स

हमारे ऐप से नमूना Vue.js फ्लैशकार्ड्स

Vue.js में फंक्शनल कॉम्पोनेंट्स को कैसे बनाया जाता है और उनका क्या उपयोग हो सकता है?

Vue.js डेटा रिएक्टिविटी को कैसे संभालता है और यह एप्लिकेशन की परफॉरमेंस पर कैसे प्रभाव डालता है?

Vue CLI क्या है और इसके मुख्य कार्य क्या हैं?

Vue.js में कंप्यूटेड प्रॉपर्टीज और वॉचर्स में क्या अंतर है?

डाउनलोड करें आईटी फ्लैशकार्ड्स अभी