监听对象 handler定义数据变化时调用的监听器函数 可以设置 deep和immediate属性
deep属性在监听对象属性变化时使用，值为true，表示无论该对象的属性在对象中的层级有多深，只要该属性的值发生变化，都会被监测到
监听器函数在初始渲染时并不会被调用，只有在后续监听的属性发生变化时才会被调用；如果需要监听器函数在监听开始后立即执行，可以使用immediate选项将其值设置为true
<body>
<div id="app">
商品价格: <input type="text" v-model="goods.price">
<p>{{pess}}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const vm = Vue.createApp({
data(){
return{
pess:'',
goods:{
name:'洗衣机',
price:0
}
}
}, // 计算属性
computed:{
},//监听器
watch:{
goods:{
handler:function(newValue,oldValue){
if(newValue.price >= 8000){
this.pess = "价格太贵了,不可以采购"
}else{
this.pess = "价格合适,可以采购"
}
},
deep:true,
//让监听器函数在页面初始化时执行，可以使用immediate选项，将其值设置为true
immediate:true
}
},// 方法
methods:{
}
}).mount('#app')
</script>
</body>