परिवर्तनों पर नज़र रखने और व्यवहार को अधिक सहजता से लागू करने के लिए पर्यवेक्षकों का उपयोग करें।
चाबी छीनना
- Vue जैसे जावास्क्रिप्ट फ्रेमवर्क वेब ऐप विकास को सरल बनाने के लिए घटक वास्तुकला, राज्य प्रबंधन और रूटिंग जैसी सुविधाएँ प्रदान करते हैं।
- Vue वॉचर्स ऐसे फ़ंक्शन हैं जो प्रतिक्रियाशील गुणों में परिवर्तन की निगरानी करते हैं और आपको घटनाओं और डेटा संशोधन पर प्रतिक्रिया करने की अनुमति देते हैं।
- परिकलित गुणों के साथ देखने वालों की तुलना करने पर, परिकलित गुण अधिक संक्षिप्त और पढ़ने में आसान होते हैं, जिसके परिणामस्वरूप बेहतर प्रदर्शन और डिबगिंग होती है।
जावास्क्रिप्ट फ्रेमवर्क वेब विकास का एक महत्वपूर्ण हिस्सा बन गया है। यह घटक वास्तुकला, राज्य प्रबंधन और रूटिंग सहित उनकी आसानी से सुलभ सुविधाओं के कारण है। ये शुरुआत से एक वेब ऐप बनाने के लिए आवश्यक तनाव, प्रयास और समय को कम करने में मदद करते हैं।
Vue, इन ढाँचों में से एक, विकास को गति देने के लिए कई सुविधाएँ प्रदान करता है। वॉच सुविधा आपको प्रोग्राम निष्पादन के दौरान चर और अभिव्यक्तियों के मूल्यों की निगरानी करने देती है।
Vue में वॉचर्स क्या हैं?
व्यू वॉचर्स ऐसे कार्य हैं जो प्रतिक्रियाशील संपत्ति में परिवर्तनों की निगरानी करते हैं और तदनुसार प्रतिक्रिया देते हैं। पर्यवेक्षक आपको घटनाओं और डेटा संशोधन पर प्रतिक्रिया करने देते हैं।
वॉचर का उपयोग करने के लिए, आयात करें घड़ी से कार्य करें वीयूई आपकी स्क्रिप्ट में पैकेज:
<scriptsetup>
import { watch } from 'vue';
script>
अब आप अपने Vue घटक में वॉचर को लागू करने के लिए वॉच फ़ंक्शन का उपयोग कर सकते हैं। यहाँ एक सरल उदाहरण है:
<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template><scriptsetup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>
यह सरल घटक उपयोगकर्ता के नाम में परिवर्तन की निगरानी के लिए वॉच फ़ंक्शन का उपयोग करता है। स्निपेट का टेम्प्लेट अनुभाग घटक की HTML संरचना को परिभाषित करता है, जिसमें शामिल है पी टैग जो उपयोगकर्ता प्रतिक्रियाशील चर का मान प्रदर्शित करता है।
टेम्पलेट में एक बटन तत्व भी शामिल है, a नाम परिवर्तन करें समारोह एक क्लिक इवेंट श्रोता से जुड़ा हुआ. जब उपयोगकर्ता चर बदलता है, तो Vue कॉलबैक फ़ंक्शन को ट्रिगर करता है। कॉलबैक फ़ंक्शन एक चेतावनी प्रदर्शित करता है: "उपयोगकर्ता नाम "चिनेडु" से "विक्टर" में बदल गया है।"
परिकलित गुणों के साथ देखने वालों की तुलना करना
दर्शकों और परिकलित संपत्तियों के बीच अंतर को समझना महत्वपूर्ण है। हालाँकि इन दोनों का उपयोग Vue में प्रतिक्रियाशीलता उपकरण के रूप में किया जाता है, आपको इनका उपयोग विभिन्न उद्देश्यों के लिए करना चाहिए।
उदाहरण के लिए, आप पर्यवेक्षकों की सहायता से पिता और पुत्र की आयु के योग की गणना इस प्रकार कर सकते हैं:
<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template><scriptsetup>
import { ref, watch } from 'vue';const father = ref();
const son = ref();
const total = ref();watch(son, (newAge, oldAge) => {
total.value = Number(father.value) + Number(newAge)
})watch(father, (newAge, oldAge) => {
total.value = Number(newAge) + Number(son.value)
})
script>
यह Vue घटक पिता और पुत्र की आयु का योग प्राप्त करने के लिए वॉचर्स का उपयोग करता है। ऐसा करने के लिए, यह एक नया प्रतिक्रियाशील चर बनाता है, कुल. आप एक बना सकते हैं जब आप Vue की संरचना API का उपयोग करते हैं तो प्रतिक्रियाशील चर.
फिर स्निपेट दो को नियोजित करता है घड़ी बेटे और पिता की उम्र देखने का कार्य। प्रत्येक उम्र के लिए, पिता या पुत्र के लिए, स्निपेट दूसरे की उम्र के साथ नए मान का योग करता है। इसके बाद यह परिणाम को सहेजता है कुल प्रतिक्रियाशील चर.
उपरोक्त स्निपेट में उसी परिदृश्य पर विचार करें जो परिकलित गुणों का उपयोग करता है:
<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template><scriptsetup>
import { ref, computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});
script>
पहले की तुलना में यह स्निपेट अधिक संक्षिप्त और पढ़ने में आसान है। स्निपेट को पिता और पुत्र की उम्र का योग मिलता है और इसे गणना किए गए रेफरी (चर) में सहेजा जाता है, कुल. टेम्प्लेट अनुभाग तब कुल वैरिएबल का उपयोग करके प्रदर्शित करता है इंटरपोलेशन, Vue में एक डेटा बाइंडिंग तकनीक.
भले ही आप दर्शकों के साथ दोनों उम्र का कुल योग प्राप्त कर सकते हैं, लेकिन गणना की गई संपत्तियों के साथ ऐसा करना बेहतर है। इस स्थिति में वॉचर्स का उपयोग करने से लोडिंग समय धीमा हो सकता है और डिबगिंग कठिन हो सकती है क्योंकि इसमें अधिक कोड शामिल होता है।
गणना की गई संपत्तियों के प्रतिस्थापन के रूप में वॉचर्स का उपयोग न करें। जब आप मौजूदा प्रतिक्रियाशील डेटा से नया डेटा प्राप्त करना चाहते हैं, तो डेटा परिवर्तनों और गणना किए गए गुणों की निगरानी और प्रतिक्रिया करने के लिए वॉचर्स का उपयोग करें।
तुरंत विकल्प एक कॉन्फ़िगरेशन है जिसका उपयोग आप वॉचर बनाते समय कर सकते हैं। यह विकल्प निर्धारित करता है कि क्या व्यूअर को Vue द्वारा घटक माउंट करने के तुरंत बाद अपना कॉलबैक ट्रिगर करना चाहिए।
यहां तत्काल विकल्प के साथ वॉचर का उपयोग करने वाले घटक का एक उदाहरण दिया गया है:
<scriptsetup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
},
{ immediate: true }
);
script>
उपरोक्त स्निपेट में, घटक आरंभीकरण के तुरंत बाद वॉचर अपने कॉलबैक को निष्पादित करेगा और कंसोल पर "गणना को अपरिभाषित से 10 में बदल दिया गया" लॉग करेगा। इससे पता चलता है कि Vue द्वारा काउंट रेफरी में 10 का मान डालने से पहले प्रारंभिक चर अपरिभाषित था।
तत्काल विकल्प उन परिदृश्यों में उपयोगी हो सकता है जहां आप देखी गई संपत्ति के वर्तमान मूल्य के आधार पर प्रारंभिक कार्रवाई या आरंभीकरण करना चाहते हैं। उदाहरण के लिए, जब Vue एक घटक को माउंट करता है तो आपको अपने ऐप को एपीआई से डेटा लाने की आवश्यकता होती है।
व्यू वॉचर्स में डीप विकल्प उपलब्ध है
गहरा Vue में दर्शकों के साथ काम करते समय उपलब्ध विकल्प नेस्टेड वस्तुओं या सरणियों के भीतर परिवर्तनों के गहन अवलोकन को सक्षम बनाता है। जब सेट किया जाए सत्य, पर्यवेक्षक नेस्टेड संपत्तियों के भीतर परिवर्तनों का पता लगा सकता है।
यहां गहरे विकल्प वाले Vue घटक का एक उदाहरण दिया गया है:
<scriptsetup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
},
{ deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>
उपरोक्त स्निपेट आरंभ करता है डेटा a युक्त वस्तु के साथ रेफर करें लंबाई संपत्ति। स्निपेट गहरे विकल्प को सेट करता है सत्य. इसके बाद यह कंसोल पर लॉग इन करता है कि लंबाई प्रॉपर्टी बदलने के बाद से डेटा बदल गया है 43.
डीप विकल्प को सही पर सेट किए बिना, वॉच फ़ंक्शन ऑब्जेक्ट में कोई भी बदलाव नहीं देख पाएगा। हालाँकि, जब आप डेटा वैरिएबल को एक प्रतिक्रियाशील ऑब्जेक्ट के रूप में प्रारंभ करते हैं, तो Vue गहरे विकल्प के बिना सभी नेस्टेड और गहरे परिवर्तनों को ट्रैक करता है:
<scriptsetup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
}
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>
उपरोक्त स्निपेट में वॉच फ़ंक्शन कंसोल पर लॉग करेगा कि डेटा बदल गया है क्योंकि डेटा वैरिएबल एक प्रतिक्रियाशील ऑब्जेक्ट है।
Vue वॉचर्स के साथ बेहतर ऐप्स बनाएं
Vue के पर्यवेक्षक आपके अनुप्रयोगों में सूक्ष्म प्रतिक्रियाशीलता प्राप्त करने में आपकी सहायता कर सकते हैं। वे नियंत्रित करते हैं कि आप डेटा गुणों में परिवर्तन कैसे देख सकते हैं और प्रतिक्रिया में कस्टम तर्क कैसे चला सकते हैं।
यह समझना कि वॉचर्स का उपयोग कब करना है, गणना की गई संपत्तियों से उनके अंतर, और तत्काल और गहरे जैसे विकल्प बहुत ही संवेदनशील Vue एप्लिकेशन बनाने की आपकी क्षमता को बढ़ा सकते हैं।