监视属性
watch: {
isHot:{
handler(){ }
}
}
handler当isHot发生改变时调用。
watch: {
isHot: {
handler(newValue, oldValue) {
console.log('修改了', newValue, oldValue);
}
}
}
有什么用吗:例如new和oldvalue差值过大,本例子就意味着温差过大,穿衣提示。
immediate:true,初始化时让handler调用一下。
不光能监视data,也可以监视计算属性computed,
也可以用API
深度监视:
numbers: {
a: 1,
b: 2
}
只监测a:
'numbers.a': {
handler() {
console.log('a变了');
}
怎么监视numbers的所有元素:
numbers: {
deep: true,
handler() {
console.log('numbers 变了');
}
}
加上deep深度监视属性。
简写
isHot(newValue,oldValue){
console.log('isHot 被修改了',newValue,oldValue)
}
vm.$watch('isHot',function(newValue,oldValue){
console,log( )
})
姓名案例:使用computed和watch都可以实现。
下面是watch属性实现的:
下面是计算属性:
计算属性完全靠返回值,不能进行异步任务,但是watch可以进行,
fullName(){
console.log('get被调用');
setTimeout(()=>{
return this.firstName + this.lastName
},1000)
}
这个代码想要让返回值等待1秒之后返回,但是错误为把return放到setTimeout函数中,但是fullName没有返回值了。而fullName是computed属性,又得依靠返回值,所以不能进行异步操作。
下面是watch实现异步:
firstName(val){
setTimeout(() => {
this.firstName = val+this.lastName
}, 1000);
},
lastName(val){
setTimeout(() => {
this.lastName = this.firstName+val
}, 1000);
}