VueJS - प्रतिक्रियाशील इंटरफ़ेस

VueJS गुणों में प्रतिक्रियाशीलता जोड़ने के लिए विकल्प प्रदान करता है, जिन्हें गतिशील रूप से जोड़ा जाता है। इस बात पर विचार करें कि हमने पहले ही वाउ उदाहरण बना लिया है और वॉच प्रॉपर्टी को जोड़ना है। इसे निम्नानुसार किया जा सकता है -

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

डेटा ऑब्जेक्ट में 1 के रूप में परिभाषित एक संपत्ति काउंटर है। जब हम बटन पर क्लिक करते हैं तो काउंटर बढ़ जाता है।

Vue उदाहरण पहले से ही बनाया गया है। इसमें घड़ी जोड़ने के लिए, हमें इसे निम्नानुसार करने की आवश्यकता है -

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

हमें वाउ उदाहरण के बाहर घड़ी जोड़ने के लिए $ घड़ी का उपयोग करने की आवश्यकता है। एक अलर्ट जोड़ा गया है, जो काउंटर प्रॉपर्टी के लिए मूल्य परिवर्तन दिखाता है। इसमें एक टाइमर फ़ंक्शन जोड़ा गया है, अर्थात सेटटाइमआउट, जो काउंटर मान को 20 पर सेट करता है।

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

जब भी काउंटर बदला जाता है, वॉच मेथड से अलर्ट निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

VueJS संपत्ति जोड़ और विलोपन का पता नहीं लगा सकता। सबसे अच्छा तरीका हमेशा गुणों की घोषणा करना है, जिसे Vue उदाहरण में प्रतिक्रियाशील अग्रिम होना चाहिए। यदि हमें रन टाइम पर प्रॉपर्टीज जोड़ने की आवश्यकता है, तो हम Vue Global, Vue.set और Vue.delete विधियों का उपयोग कर सकते हैं।

Vue.set

यह विधि किसी ऑब्जेक्ट पर गुण सेट करने में मदद करती है। इसका उपयोग सीमा के आस-पास होने के लिए किया जाता है जो Vue संपत्ति के अतिरिक्त का पता नहीं लगा सकता है।

वाक्य - विन्यास

Vue.set( target, key, value )

कहाँ पे,

लक्ष्य: एक वस्तु या एक सरणी हो सकता है

कुंजी: एक स्ट्रिंग या संख्या हो सकती है

मूल्य: किसी भी प्रकार का हो सकता है

आइए एक उदाहरण देखें।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

उपरोक्त उदाहरण में, कोड के निम्नलिखित टुकड़े का उपयोग करके शुरू में बनाया गया एक चर myproduct है।

var myproduct = {"id":1, name:"book", "price":"20.00"};

यह Vue उदाहरण में डेटा ऑब्जेक्ट को निम्नानुसार दिया गया है -

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

विचार करें, हम Vue उदाहरण बनने के बाद, एक और संपत्ति myproduct सरणी में जोड़ना चाहते हैं। इसे निम्नानुसार किया जा सकता है -

vm.products.qty = "1";

चलो कंसोल में आउटपुट देखें।

जैसा कि ऊपर देखा गया है, उत्पादों में मात्रा जोड़ी जाती है। प्राप्त / सेट विधियाँ, जो मूल रूप से प्रतिक्रियात्मकता को आईडी, नाम और मूल्य के लिए उपलब्ध हैं, और मात्रा के लिए उपलब्ध नहीं हैं।

हम केवल वस्तुनिष्ठ वस्तु जोड़कर अभिक्रियाशीलता प्राप्त नहीं कर सकते हैं। VueJS ज्यादातर अपने सभी गुणों को शुरू में बनाना चाहता है। हालाँकि, बाद में हमें इसे जोड़ने की आवश्यकता होती है, हम Vue.set का उपयोग कर सकते हैं। इसके लिए, हमें वीयू ग्लोबल यानी Vue.set का उपयोग करके इसे सेट करना होगा।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

हमने निम्नलिखित कोड का उपयोग करके सरणी में मात्रा जोड़ने के लिए Vue.set का उपयोग किया है।

Vue.set(myproduct, 'qty', 1);

हमने vue ऑब्जेक्ट को सांत्वना दी है और निम्नलिखित आउटपुट है।

अब, हम Vue.set का उपयोग करके क्यूटी जोड़ा के लिए प्राप्त / सेट देख सकते हैं।

Vue.delete

इस फ़ंक्शन का उपयोग संपत्ति को गतिशील रूप से हटाने के लिए किया जाता है।

उदाहरण

Vue.delete( target, key )

कहाँ पे,

लक्ष्य: एक वस्तु या एक सरणी हो सकता है

कुंजी: एक स्ट्रिंग या एक संख्या हो सकती है

किसी भी संपत्ति को हटाने के लिए, हम निम्नलिखित कोड के रूप में Vue.delete का उपयोग कर सकते हैं।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

उपरोक्त उदाहरण में, हमने निम्नलिखित कोड का उपयोग करके सरणी से मूल्य को हटाने के लिए Vue.delete का उपयोग किया है।

Vue.delete(myproduct, 'price');

निम्नलिखित आउटपुट है, हम कंसोल में देखते हैं।

हटाने के बाद, हम केवल आईडी और नाम देख सकते हैं क्योंकि मूल्य हटा दिया गया है। हम यह भी नोटिस कर सकते हैं कि गेट / सेट विधियां हटा दी गई हैं।