Options API: data, methods, computed
reactive data परिभाषित करें, template से call किए जाने वाले methods लिखें और अपने-आप update होने वाले derived values के लिए computed properties का उपयोग करें।
Options API: data, methods, computed, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
विकल्प एपीआई क्या है
विकल्प एपीआई कॉम्पोनेंट के तर्क को विकल्प के प्रकार के अनुसार व्यवस्थित करता है: data (रिएक्टिव स्थिति), methods (फ़ंक्शन), computed (व्युत्पन्न स्थिति), watch (साइड इफ़ेक्ट) और जीवनचक्र हुक। प्रत्येक को नामित ऑब्जेक्ट प्रॉपर्टी में रखा जाता है।
data विकल्प
रिएक्टिव प्रॉपर्टी का एक ऑब्जेक्ट लौटाता है। data() में घोषित सभी प्रॉपर्टी रिएक्टिव होती हैं — Vue उन पर नज़र रखता है और उनके बदलने पर टेम्पलेट को फिर से रेंडर करता है।
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}methods विकल्प
ये ऐसे फ़ंक्शन होते हैं जिन्हें टेम्पलेट या अन्य methods से कॉल किया जा सकता है। methods के अंदर this कॉम्पोनेंट इंस्टेंस को दर्शाता है और data तथा computed प्रॉपर्टी तक पहुँच देता है।
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}computed विकल्प
Computed प्रॉपर्टी रिएक्टिव डेटा से मान प्राप्त करती हैं। इन्हें कैश किया जाता है — इनकी गणना तभी दोबारा होती है जब इनकी निर्भरताएँ बदलती हैं। अनावश्यक पुनर्गणना से बचने के लिए व्युत्पन्न मानों हेतु methods के बजाय इनका उपयोग करें।
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}लिखने योग्य computed प्रॉपर्टी
किसी computed में get और set जोड़कर उसे लिखने योग्य बनाया जा सकता है — यह v-model के साथ द्विदिश बाइंडिंग के लिए उपयोगी है।
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}watch विकल्प
जब कोई रिएक्टिव प्रॉपर्टी बदलती है, तब वॉचर साइड इफ़ेक्ट चलाते हैं। डेटा में बदलाव से शुरू होने वाली अतुल्यकालिक प्रक्रियाओं के लिए इनका उपयोग करें, जैसे search term बदलने पर डेटा प्राप्त करना।
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}विकल्प एपीआई में जीवनचक्र हुक
जीवनचक्र हुक को methods के रूप में घोषित करें: created, mounted, updated, unmounted। created DOM तैयार होने से पहले चलता है। mounted कॉम्पोनेंट के DOM में आने के बाद चलता है।
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}टेम्पलेट एक्सेस: $refs
टेम्पलेट एलिमेंट में ref एट्रिब्यूट जोड़ें और methods में this.$refs.name के माध्यम से DOM एलिमेंट या चाइल्ड कॉम्पोनेंट तक पहुँचें। यह माउंट होने के बाद उपलब्ध होता है।
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins बनाम कंपोज़िशन एपीआई
विकल्प एपीआई में कॉम्पोनेंट के बीच तर्क साझा करने के लिए mixins होते हैं। कंपोज़िशन एपीआई में mixins का स्थान काफी हद तक composables ने ले लिया है — इन्हें समझना कठिन होता है और इनके नेमस्पेस टकराव की समस्याएँ होती हैं। नए कोड के लिए कंपोज़िशन एपीआई को प्राथमिकता दें।
विकल्प एपीआई बनाम कंपोज़िशन एपीआई
विकल्प एपीआई छोटे से मध्यम आकार के कॉम्पोनेंट के लिए बहुत अच्छा है और शुरुआती लोगों के लिए सीखना आसान है। कंपोज़िशन एपीआई (setup() /