这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战
Vue响应接口
Vue可以添加数据动态响应接口。
可以使用$watch属性来实现数据的监听
注意：$watch必须添加在Vue实例之外才能实现正确的响应
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{ shu }}
<br>
<button @click="shu++">+1</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
shu:1
}
})
vm.$watch('shu',function(nval,oval){
alert(oval+'变成'+nval);
});
// 两个秒后shu+10
setTimeout(
function(){
vm.shu +=10;
},2000
);
</script>
</body>
</html>
Vue不允许在已经创建的实例上动态添加新的根级响应式属性。Vue不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，即使只是一个空值。如果需要在运行过程中实现属性的添加或删除，可以使用全局Vue，如Vue.set和Vue.delete方法。
Vue.set
Vue.set方法用于设置对象的属性，它可以解决Vue无法检测添加属性的问题
语法格式：
Vue.set(target,key,value)
target可以是对象或数组 key可以是字符串或数字 value可以是任何类型
Vue.set来设置新的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
计数器:{{shu.id}}
<br>
<button @click="shu.id++">++</button>
</div>
<script>
var dd={"id":1,name:"xiao"};
var vm = new Vue({
el:'#app',
data:{
shu:dd
}
});
vm.shu.q="1";
console.log(vm);
vm.$watch('counter',function(nval,oval){
alert(oval+'变成'+nval);
});
</script>
</body>
</html>
添加了属性q，但是get/set方法只可用于id、name属性，却不能在q属性中使用。
给对象增加一个属性q，可以在控制面板中看到
vm.shu.q="1";
console.log(vm);
通过get/set方法来操作属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
计数器:{{shu.id}}
<br>
<button @click="shu.id++">++</button>
</div>
<script>
var dd={"id":1,name:"xiao"};
var vm = new Vue({
el:'#app',
data:{
shu:dd
}
});
Vue.set(dd,'q',1)
console.log(vm);
vm.$watch('counter',function(nval,oval){
alert(oval+'变成'+nval);
});
</script>
</body>
</html>
Vue.delete
语法格式：
Vue.delete(target,key)
target可以是对象或数组 key可以是字符串或数字
通过delete方法删除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
计算器:{{shu.id}}
<br>
<button @click="shu.id++">++</button>
</div>
<script>
var dd={"id":1,name:"xiao"};
var vm = new Vue({
el:'#app',
data:{
shu:dd
}
});
Vue.delete(dd,'name')
console.log(vm);
vm.$watch('counter',function(nval,oval){
alert(oval+'变成'+nval);
});
</script>
</body>
</html>
