VueJS - 反应接口

VueJS反应接口 - 从基本概念到高级概念，从简单简单的步骤学习VueJS，其中包括概述，环境设置，简介，实例，模板，组件，计算属性，监视属性，绑定，事件，渲染，过渡和动画，指令，路由，混合，渲染功能，反应接口，示例。

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

示例

         VueJs Instance                           Counter: {{ counter }}
         Click Me

在数据对象中有一个属性计数器定义为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:可以是字符串或数字

值:可以是任何类型

让我们来看看一个例子.

示例

         VueJs Instance                           Counter: {{ products.id }}
         Click Me

在上面的例子中，使用以下代码片段在开始时创建了一个变量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.

示例

         VueJs Instance                           Counter: {{ products.id }}
         Click Me                     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 + '!');         });

我们使用Vue.set使用以下代码将数量添加到数组中.

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

我们已经安排了vue对象，以下是输出.

Products

现在，我们可以看到使用Vue.set添加的qty的get/set.

Vue.delete

此函数用于动态删除属性.

示例

Vue.delete( target, key )

其中，

目标:可以是对象或数组

键:可以是字符串或数字

要删除任何属性，我们可以使用Vue.delete，如下面的代码所示.

示例

         VueJs Instance                           Counter: {{ products.id }}
         Click Me                     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 + '!');         });

在上面的例子中，我们使用Vue.delete使用以下代码从数组中删除价格.

Vue.delete(myproduct，'price');

以下是输出，我们在控制台中看到.

删除后，我们只能看到价格被删除时的ID和名称.我们还注意到删除了get/set方法.