VueJS响应接口用法详解

在上一节中，我们学习了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，使用的代码如下。