VueJS响应接口用法详解 _vue开发实战

在上一节中，我们学习了VueJS渲染函数的作用和用法，使用Vue的渲染函数可以让复用组件更加灵活。本节我们来学习VueJS的响应接口（reactive interface），VueJS提供了向属性添加响应的选项，这些属性是动态添加的。
1、由之前的学习我们已经会创建vue实例了，需要添加watch属性，可以这样做：

< 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 app = new Vue({ el: '#app', data: { counter: 1 } }); app.$watch('counter', function (nval, oval) { alert('计数器递增 :' + oval + ' to ' + nval + '!'); }); setTimeout( function () { app.counter = 20; }, 2000 ); < /script>

在数据对象中有一个属性计数器定义为1，当我们点击按钮时，计数器增加。
上面已经创建了Vue实例，为了添加watch到Vue实例，我们需要这样做：

app.$watch('counter', function (nval, oval) { alert('计数器递增 :' + oval + ' to ' + nval + '!'); });

我们需要使用$watch在vue实例之外添加watch。在这里添加了一个alert，它显示计数器属性的值更改，还增加了一个计时器函数，即setTimeout，它将计数器的值设置为20。

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

每当计数器被更改时，来自watch方法的alert将被触发，如下面的截图所示。

文章图片
VueJS无法检测属性的添加和删除，最好的方法是始终声明属性，这需要在Vue实例中预先作出反应。如果我们需要在运行时添加属性，我们可以使用Vue global, Vue.set和Vue.delete方法。
2、Vue.set这个方法有助于在对象上设置属性，它用于绕过Vue无法检测属性添加的限制，使用语法如下：

Vue.set( target, key, value )

其中，target可以是对象或数组，key可以是字符串或数值，value可以是任何类型。

< div id="app"> < p style="font-size:25px; ">计数器: {{ products.id }}< /p> < button @click="products.id++" style="font-size:25px; ">点击< /button> < /div> < script type="text/javascript"> var myproduct = { "id": 1, name: "book", "price": "20.00" }; var app = new Vue({ el: '#app', data: { counter: 1, products: myproduct } }); app.products.qty = "1"; console.log(app); app.$watch('counter', function (nval, oval) { alert('计数器递增 :' + oval + ' to ' + nval + '!'); }); < /script>

在上面的例子中，有一个变量myproduct是在开始时使用下面这段代码创建的。

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

它被赋值给了Vue实例中的数据对象，如下所示

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

如果我们希望在创建Vue实例之后向myproduct数组添加一个属性，可以这样做：

app.products.qty = "1";

查看控制台输出：

文章图片
如上所述，在产品中添加了数量qty，get/set方法主要用于添加id、name和price的响应性，而不适用于qty。
我们不能仅仅通过添加vue对象来实现响应性，VueJS最希望在一开始就创建它的所有属性。但是，如果我们以后需要添加它，我们可以使用Vue.set。为此，我们需要使用vue global来设置它，即vue.set。
我们使用了Vue.set将qty添加到myproduct中，如下代码：

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

查看控制台输出，如下：

文章图片
现在，我们可以看到使用Vue.set为qty添加了get/set。
3、Vue.delete这个函数用于动态删除属性，使用语法如下：

Vue.delete( target, key )

其中，target可以是对象或数组，key可以是字符串或数字。实现删除任何属性，我们可以使用如下代码中的Vue.delete。

< div id="app"> < p style="font-size:25px; ">计数器: {{ products.id }}< /p> < button @click="products.id++" style="font-size:25px; ">点击< /button> < /div> < script type="text/javascript"> var myproduct = { "id": 1, name: "book", "price": "20.00" }; var app = new Vue({ el: '#app', data: { counter: 1, products: myproduct } }); Vue.delete(myproduct, 'price'); console.log(app); app.$watch('counter', function (nval, oval) { alert('计数器递增 :' + oval + ' to ' + nval + '!'); }); < /script>

在上面的例子中，我们使用了Vue.delete来从数组中删除price，使用的代码如下。