监视属性watch
监视属性的函数:
01_handler()函数:当isHot被修改发生改变时被调用,他有两个参数,(newValue,oldValue)
02_immediate:true 初始化时立刻执行,进行调用
<div id="root1">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
new Vue({
el: "#root1",
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot: {
immediate: true, //初始化时让handle进行调用
//handler()什么时候调用?当isHot发生改变时
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
}
}
})
</script>
watch的监听属性handler,只要数据发生改变,就会进行通知,并且能够显示新旧数据
03_深度监视:deep属性
<script>
new Vue({
el: "#root1",
data: {
isHot: true,
numbers: {
a: 1,
b: 1
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot: {
immediate: true, //初始化时让handle进行调用
//handler()什么时候调用?当isHot发生改变时
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
},
//监视多级结构中某个属性的改变,即监视numbers结构中a属性的变化
'numbers.a': {
handler() {
console.log('numbers.a改变了')
}
},
//添加一个deep:true属性,用来监视多级结构中所有属性的改变,即numbers结构中任何一个属性发生变化被可以被监视到
numbers: {
deep: true,
handler() {
console.log("number发生改变了");
}
}
}
})
</script>
04_监视属性缩写:如果不需要immediate和deep属性,才能使用,即当watch只有handle一个配置项的时候,才能使用