监视属性
普通写法，监视天气
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="isHot = !isHot">change</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods:{
// change(){
// this.isHot = !this.isHot
// }
}
})
</script>
监视属性
watch设置监视属性，watch中设置要监视的对象，其中编写handler回调函数
watch:{
info:{
handler(newvalue,oldvalue){
//当isHot改变的时候调用
console.log("ishot change",newvalue,oldvalue)
},
immediate:true//初始化是调用handler
}
}
另一种方式：通过实例化vm，使用vm.$watch调用
vm.$watch('isHot',{
handler(newvalue,oldvalue){
//当isHot改变的时候调用
console.log("ishot change",newvalue,oldvalue)
},
immediate:true//初始化是调用handler
})
总结：
<!--
监视属性watch：
1.当监视属性的值发生变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视。
3.监视的两种写法：
new Vue时传入watch配置
通过vm.$watch配置
-->
深度监视
<hr>
<h3>a:{{numbers.a}}</h3>
<button @click="numbers.a++">a+1</button>
<hr>
<h3>b:{{numbers.b}}</h3>
<button @click="numbers.b++">b+1</button>
//监视多个结构中某个属性变化
'numbers.a':{
deep:true,
handler(newvalue, oldvalue) {
console.log("a change")
}
}
总结：
<!--
深度监视：
1.vue中的watch默认不监测对象内部值的改变（一层）
2.配置deep：true可以监测对象内部的改变（多层）
备注：
1.vue自身可以监测对象内部值的改变，但vue提供的watch默认不检测
2.使用watch时根据数据的具体结构，决定是否采用深度监测
-->
over
标签：watch,isHot,day59,handler,oldvalue,监视,newvalue,属性 From： https://www.cnblogs.com/GUGUZIZI/p/17050885.html