计算属性是vue里面一个很常见的属性,相当于data里面有一个特殊的变量,这个变量绑定一个其他值,当其他值变化的时候他会执行一个函数,然后将这个变量的值等同于这个函数的返回值,这些函数都写在计算属性computed里面
监听属性是用来监听数据的变化的,当他监听的数据发生变化的时候执行一个函数,这些函数都放到watch里面
const vm =new Vue({
el:"#root",
data:{
},
computed:{//计算属性
},
methods:{
},
watch:{//监听属性
}
})
我们现在有一个要求,点击一个按钮,切换天气为凉爽或者炎热,分别用computed实现和watch实现
今天天气很好{{info}}
<button @click="showInfo">切换天气</button>
<button @click="numbers.a++">a++</button>
第一步是在值,判断现在的天气是啥
data:{
isHot:true,
},
第二步点击按钮,给按钮赋值,切换isHot的属性
methods:{
showInfo(e){
this.isHot=!this.isHot
},
},
用computed实现
计算属性增加一个绑定的值,当isHot发生变化的时候,切换info的值为炎热或者凉爽
info(){//计算属性,这个也是相当于值info
return this .isHot ?'炎热':'凉爽'//返回炎热或者凉爽给info,dom树再调用info
}
我们也可以用watch监听属性来实现
watch:{//检测函数
'isHot':{
//当isHot发生改变的时候调用
// immediate:true,//初始化的时候让handler调用一下
handler(newValue,oldValue){
//newValue,oldValue新变化的值,之前的值
console.log('isHot被修改了')
}
}
}
watch相比于cmputed,多了对异步的计算
watch还可以监视整个数组或者数组里面其中一个值的变化
//多层结构的监视
'numbers.a':{
handler(){
console.log("a的值改变了")
}
},
'numbers':{//vue是默认 watch是不可以监测到这个东西的改变的
deep:true,//配置这个后就可以监测到对象内部的改变了
handler(){
console.log("number的值改变了")
}
},
//简写,要是你不配其他设置可以用简写的方式省代码
numbers(){//vue是默认 watch是不可以监测到这个东西的改变的
// 简写的代价就是不能写deep之类的配置了
console.log("number的值改变了")
}
我们也可以对整个vue来监视其中的内容来实现监视的效果
也可以直接监视整个vm来实现
vm.$watch('isHot',{ //监视isHot并在监视成功的时候调用这个函数
handler(newValue,oldValue){
//newValue,oldValue新变化的值,之前的值
console.log('isHot被修改了')
}
})