1.监听普通类型
const index = ref(0); watch(index,(newValue,oldValue)=>{ console.log("新值是"+newValue, "旧址是"+oldValue); })
2.监听多个普通类型
const index = ref(0); const inends = ref(0) watch([index,inends],(newValue,oldValue)=>{ console.log("新值是"+newValue, "旧址是"+oldValue); //返回的是一个数组 })
3.监听响应对象
const person = reactive({ name:"柳小刀", age:18, sex:"男" }) watch(person,(newValue,oldValue)=>{ console.log(newValue,oldValue); })
此时 oldValue 失效，并且强制开启了不会生效的deep,返回一个proxy对象，要想使oldValue有效需要监听响应对象的某个属性
4.监听对象的某个属性 , 第一个参数应该传入一个函数表达式
const person = reactive({ name:"柳小刀", age:18, sex:"男" }) watch(()=>person.name,(newValue,oldValue)=>{ console.log(newValue,oldValue); })
5.监听reative对象嵌套对象 此时deep是生效的
const person = reactive({ name:"柳小刀", age:18, sex:"男", hobbe:{ sing:"唱歌", dangce:"跳舞" } }) watch(()=>person.hobbe,(newValue,oldValue)=>{ console.log(newValue,oldValue); })
此时oldValue有效 ，说明vue3默认是开启深度监听了
