VueJS - 反应接口

VueJS提供了添加动态添加的属性的选项.考虑到我们已经创建了vue实例并需要添加watch属性.它可以完成如下 :

示例

<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 + '!');
});

我们需要使用$ watch在vue实例外添加监视.添加了一个警报，显示计数器属性的值更改.还添加了一个计时器功能，即setTimeout，它将计数器值设置为20.

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

每当计数器更改时，watch方法的警报将被触发，如以下屏幕截图所示.

Counter

VueJS无法检测属性添加和删除.最好的方法是始终声明属性，这些属性需要在Vue实例中预先响应.如果我们需要在运行时添加属性，我们可以使用Vue global，Vue.set和Vue.delete方法.

Vue.set

此方法有助于在对象上设置属性.它用于解决Vue无法检测属性添加的限制.

语法

 
 Vue. set(target，key，value)

其中，

target:可以是对象还是数组

key:可以是字符串或数字

值:可以是任何类型

让我们来看看一个例子.

示例

<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";

让我们在控制台中看到输出.

MyProduct Array

如上所示，在产品中添加了数量. get/set方法基本上增加了反应性，可用于id，name和price，而不适用于qty.

我们无法通过添加vue对象来实现反应. VueJS主要希望在开始时创建它的所有属性.但是，如果我们稍后需要添加它，我们可以使用Vue.set.为此，我们需要使用vue global设置它，即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对象，以下是输出.

Products

现在，我们可以看到使用Vue.set添加的qty的get/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使用以下代码从数组中删除价格.