一、侦听属性watch
-
当被侦听的属性变化时，回调函数自动调用，进行相关操作。
-
监视的属性必须存在，才能进行监视。
-
监视的两种写法：
- (1).new Vue时传入watch配置
- (2).通过vm.$watch监视
二、侦听属性的效果
当点击页面中的button按钮时，调用methods方法中的函数，修改属性中的isHot的值，watch会侦听到isHot发生了变化，从而调用handler函数在控制台打印输出。
三、侦听属性的两种写法
1、Vue实例化时传入watch配置
<body>
<div id="root">
<span>今天的天气很{{info}}</span><br><br>
<button @click="changeWeather">点击切换天气</button>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
isHot:'true'
},
computed:{
info(){
return this.isHot? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot=!this.isHot
}
},
watch:{
isHot:{
handler(oldValue,newValue){
console.log('isHot属性修改了',oldValue,newValue)
}
}
}
})
</script>
2、通过vm.$watch
<body>
<div id="root">
<span>今天的天气很{{info}}</span><br><br>
<button @click="changeWeather">点击切换天气</button>
</div>
</body>
<script>
const vm=new Vue({
el:'#root',
data:{
isHot:'true'
},
computed:{
info(){
return this.isHot? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot=!this.isHot
}
},
})
vm.$watch('isHot',{
handler(oldValue,newValue){
console.log('isHot属性修改了',oldValue,newValue)
}
})
</script>