- 两个小坑
- 监视reactive定义响应式数据,强制开启了深度监听(deep配置无效)
- 监视reactive定义响应式数据的某个属性时,deep配置有效
- watch监听ref 所定义的基本数据类型,不要写.value
- watch监听ref 定义的object类型时,因为object.value 是proxy类型,可以直接对object.value进行深度监听,写法:
let person = ref({
name:'张三',
age:15,
job:{
j1:{
salary:20
}
}
})
watch(person.value,(newValue,oldValue)=>{
console.info("person的值发生改变了",newValue,oldValue)
},{immediate:true})
若不想写对象名.value,则需要对ref定义的响应式对象进行深度监听 let person = ref({
name:'张三',
age:15,
job:{
j1:{
salary:20
}
}
})
watch(person,(newValue,oldValue)=>{
console.info("person的值发生改变了",newValue,oldValue)
},{deep:true})
let sum = ref(10)
//监视ref定义的一个响应式数据
watch(sum,(newValue,oldValue)=>{
console.info("sum的值变化了"+newValue,oldValue)
},{
immediate:true
})
let msg = ref('你好啊')
//监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
console.info(newValue)
console.info("数值变化了"+newValue,oldValue)
})
let person = reactive({
name:'张三',
age:15,
job:{
j1:{
salary:20
}
}
})
//监视reactive所定义的一个响应式数据
// 是获取不到旧值的
//强制开启深度监视(deep 配置无效)
watch(person,(newValue,oldValue)=>{
console.info("person的值发生改变了",newValue,oldValue)
},
{immediate:true,deep:false} //此处的deep配置不再奏效
)
//监视reactive所定义的一个响应式数据中的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
console.info("姓名发生改变了",newValue,oldValue)
})
//监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.info("姓名,年龄发生改变了",newValue,oldValue)
})
//特殊情况 监视reactive定义对象中的某个属性,这个属性的类型是对象类型,deep属性有效
watch(()=>person.job,(newValue,oldValue)=>{
console.info("job发生变化了",newValue,oldValue)
},{
deep:true
})