基本使用
可以参考安卓的Observer
在option中增加watch对象,对象中定义要侦听的属性的函数,函数名为属性名,第一个参数是改变后的值(新值),第二个参数是改变前的值(旧值)
// question侦听的data中属性的名称
// newValue变化后的新值
// oldValue变化前的旧值
// 安卓中的observer
watch:{
question(newValue,oldValue){
console.log("新值:",newValue,"旧值:",oldValue);
this.queryAnswer();
}
}每当侦听的变量发生改变时就会调用这个方法。
配置选项
deep深度监听;immediate立即执行
watch:{
// 默认情况下侦听器只能侦听数据本身的改变(内部改变不能侦听)
// info(newInfo, oldInfo){
// console.log("new Value", newInfo,"old Value", oldInfo);
// }
// 上面是下面的语法糖
info: {
handler: function(newInfo, oldInfo){
console.log("new Value", newInfo,"old Value", oldInfo);
},
// 深度侦听
deep: true,
// 立即执行
immediate: true
}
}其它方式
只监听内部的一个属性:
watch:{
"info.name": function (newValue, oldValue) {
console.log(newValue, oldValue);
}
}通过生命周期来绑定侦听器,在options中的created中:
created(){
const unwatch=this.$watch("info",function (newValue, oldValue) {
console.log(newValue, oldValue);
},{
deep: true,
immediate: true
});
// 取消侦听
// unwatch();
}该方法会返回一个unwatch,可以调用之以取消侦听。