Vue.set（添加）和 Vue.delete（删除）属性

        Vue 可以添加数据动态响应接口。

        Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。

        Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。

        如果我们需要在运行过程中实现属性的添加或删除，则可以使用全局 Vue，Vue.set 和 Vue.delete 方法。

        Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制。Vue.delete 用于删除动态添加的属性。二者的语法格式如下：

//target:可以是对象或数组 key:要添加的属性名 value:要添加的属性的值
Vue.set( target, key, value )


//target:可以是对象或数组 key:要删除的属性名
Vue.delete( target, key )

        如果我们想给 myproduct 数组添加一个或多个属性，可以使用以下方式：

var myproduct = {"id":1, "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
//第一种属性添加方式
vm.products.qty = "1";
//第二种属性添加方式
//Vue.set(myproduct, 'qty', 1)
//删除price属性
Vue.delete(myproduct, 'price');
console.log(vm.products);

        上述例子中第一种属性添加方式，控制台输出结果如下，可以看到在products中添加了属性 qty，但是 get/set 方法却不能在 qty 属性中使用，无法实现动态响应，此方式不可行。

        而第二种属性添加方式，控制台输出结果如下，看出 get/set 方法可用于qty 属性。qty成为和id一样的响应式属性。

        最后我们也可以看到 price 属性已删除，只剩下了 id 属性，price 属性的 get/set 方法也已删除。