标签：log 08 isHot 案例 handler numbers oldValue 监视 newValue
一、深度监视
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深度监视</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 深度监视：
1、Vue中的watch默认不监测对象内部值的变化(一层)。
2、配置deep：true，可以监测对象内部值改变（多层）。
备注：
1、Vue自身可以监测到对象内部值的改变，但Vue提供的watch默认不可以！
2、使用watch时根据数据的具体结构，决定是否采用深度监视。
-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<!-- <h2>今天天气很一般</h2> -->
<button @click="changeWeather">切换天气</button>
<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>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue 在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
// immediate:true,//初始化时让handler调用一次
//handler什么时候调用：当isHot发生变化时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
// //监视多级结构中，某个属性的变化
// 'numbers.a':{
// handler(newValue,oldValue){
// console.log("a被修改了")
// }
// },
//这里的numbers是指：numbers这个key对应的地址，而不是里面的值
// numbers:{
// handler(){
// console.log('numbers的指向的地址发生了变化')
// }
// },
numbers:{
deep:true,
handler(){
console.log('numbers的任一值发生变化时，触发')
}
}
}
})
</script>
</html>
二、监视简写
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视简写</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue 在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
// //正常写法
// isHot:{
// // immediate:true,//初始化时让handler调用一次
// // watch:true,//深度监视
// //handler什么时候调用：当isHot发生变化时
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
// }
//简写
// isHot(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
}
})
//完整写法
// vm.$watch = this.$watch('isHot',{
// immediate:true,
// deep:true,
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
// });
//简写
vm.$watch('isHot', function (newValue, oldValue) {
console.log('isHot被修改了',newValue,oldValue)
});
</script>
</html>
标签：log,
08,
isHot,
案例,
handler,
numbers,
oldValue,
监视,
newValue
From： https://www.cnblogs.com/quliangshyang/p/16933891.html