监视属性watch:
(1)当被监视的属性变化时,回调函数自动调用,监视的属性必须存在,才能进行监视
(2)配置deep:true 可以监视对象内部值改变,使用watch时根据数据的具体结构,决定是否开启深度监视
<div id="root">
<P>今天你画的妆很像{{info}}</P>
<button @click="total=!total">形象切换</button>
<P>a值{{numbers.a}}</P>
<button @click="numbers.a++">点击</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
total: true,
numbers: {
a: 1,
b: 2
}
},
computed: {
info: function() {
return this.total ? "邓紫棋" : "周杰伦"
}
},
//监视属性的第一种写法
watch: { //监视属性(和计算属性写法一样):用来监视属性的变化
//监视属性total
total: {
immediate: true, //页面加载初始化时让hander调用一下(可以不加)
//handler()当监视的属性发生改变时调用
//handler(newValue,oldValue)有两个参数,newValue,属性被改变新的值,oldValue属性改变旧的值
handler(newValue, oldValue) {
console.log("total被修改了")
}
},
numbers: {
deep: true, //开启深度监视
handler() {
console.log("numbers.被改变了")
}
}
})
</script>