侦听属性
1. 侦听属性依靠watch选项来实现对自身变量的检测。
侦听属性只能检测在data中设置好的数据。
当侦听的属性值发生变化时,执行侦听属性所对应的函数。
语法格式:
watch:{
侦听属性:function(newValue,oldValue){
//当侦听属性的取值发生变化时所执行的代码
}
}
例:watch:{
kb:function(newValue,oldValue){
this.b=newValue*1024;
}
}
2.侦听属性的第二种语法格式:可以为侦听属性添加新的属性。
watch:{
侦听属性:{
handler:function(newValue,oldValue){
//当侦听属性的取值发生变化时所执行的代码
}
}
}
例:watch:{
kb:{
handler:function(newValue,oldValue){
this.b=newValue*1024;
},
immediate:true //当Vue实例创建成功后自动执行kb的handler函数。
}
}
3. 侦听属性的新属性:
immediate:逻辑值。若设置为true,则当Vue实例创建时会自动执行一次侦听属性的函数。
deep:逻辑值。设置是否进行深层的监听(针对自定义对象来进行设置的)。
- 当侦听属性是一个对象时,改变对象内属性的取值时无法让侦听属性执行函数的。
- 除非改变侦听属性的完整对象,才可以执行侦听属性的函数。
- 当设置了deep:true时,利用对象的属性进行修改,对象属性的原值无法得到保留。
例:data:{ obj:{a:10,b:20} }
(A)watch:{
obj:function(newValue,oldValue){
console.log('旧值:a=' + oldValue.a + ",b=" + oldValue.b);
console.log('新值:a=' + newValue.a + ",b=" + newValue.b);
}
}
测试:vm.obj.a=100; //不触发侦听属性obj的function函数
vm.obj={a:100,b:500}; //触发侦听属性obj的function函数
旧值:a=10,b=20
新值:a=100,b=400
(B)watch:{
obj:{
handler:function(newValue,oldValue){
console.log('旧值:a=' + oldValue.a + ",b=" + oldValue.b);
console.log('新值:a=' + newValue.a + ",b=" + newValue.b);
},
deep:true
}
}
测试:vm.obj.a=‘A’ //触发侦听属性obj的handler函数
旧值:a=‘A’,b=20
新值:a=‘A’,b=20
4. 可以通过$watch形成Vue实例的方法:
vm.$watch(‘kb’,function(newValue,oldValue){
this.b=newValue*1024;
})
5. 计算属性和侦听属性的区别:
-
计算属性使用computed选项实现;侦听属性使用watch选项或者$watch()方法实现。
-
计算属性无需在data数据中定义;侦听属性必须侦听data数据中已有的变量。
-
计算属性是依赖变量发生变化自动再次计算该属性的值。
侦听属性是被侦听的变量发生变化执行指定的函数。 -
计算属性无法完成异步操作;侦听属性可以完成异步操作。
侦听属性纠纷想到这里啦~
good luck to you!!