Vue笔记7 : 响应接口

Vue响应接口
给模型添加属性用 ： Vue.set( target, key, value )
把模型属性移除用 ： Vue.delete( target, key )

之前$watch监听 ，这里回顾一下 ：
我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。
如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
    function(){
        vm.counter += 20;
    },10000
);
</script>

 

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 vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
//vm.products.qty = "1";  //
Vue.set(myproduct, 'qty', 1);//vm.products 存在qty的getter setter
console.log(vm);

Vue.delete(myproduct, 'price');//移除vm.products 的price
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>