两种实现方式：
<script type="text/javascript">
Vue.config.productionTip=false
//创建Vue实例
const vm = new Vue({
el:'#root', //el用之指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
第一种方式：
watch:{
info:{
immediate:true,//初始化时让handler调用一下
//handler什么时候调用？当isHot发生变化时。
handler(newValue,oldValue){
console.log('info被修改了',newValue,oldValue)
}
}
}
})
第二种方式：
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
深度监视
<!--
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）
(2).配置deep:true可以监测对象内部值的改变(多层)
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
-->
watch:{
/* 监视多级结构中某个属性的变化 */
'numbers.a':{
handler(){
console.log('a被改变了')
}
},
/* 监视多级结构中所有属性的变化 */
'numbers':{
deep:true,
//immediate:true,//初始化时让handler调用一下
handler(newValue,oldValue){
console.log('numbers被修改了',newValue,oldValue)
}
}
}
/*监视属性的两种写法 */
正常写法
isHot:{
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
