vue监视属性
天气小案例,通过改变ishot的值来进行切换,所有只有对isHot的值进行监视,当isHot发生改变时则进行一些变化
监视属性(watch)与计算属性配置类似
使用handler()方法对该属性监视,改变时就会被调用
而且还可以监视到新的值与旧的值handle(newValue,oldValue)
可以发现 Vue能监视计算属性
当然计算属性还有第二种写法,第一中写vue实例中,第二种不写vue实例中
第一种:
<script>
watch :{
isHot:{
hander(){
}
}
}
</sript>
第二种:
<script>
// vm.$watch($isHot) api
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
可以发现:
当监视的属性发生变化时,回调函数自动调用,进行相关操作
监视属性必须存在才能监视!!!
监视属性的写法
(1).new Vue时传入watch配置
(2)通过vm.$watch配置
vue中的深度监视
1.Vue中的watch默认不监视内部值的改变
2.需要配置deep:true可监测对象内部的值