两个小坑
- 监视reactive定义的响应式数据时,oldvalue无法正确获取,强制开启了深度监视(deep配置失败)
- 监视reactive定义的响应式数据中某个属性时:deep配置有效
let sum = ref(10);
let user = ref('zs');
let person = reactive({
name:'ht',
age:19.
job:{
j1:{
salary:10
}
}
})
let person1 = ref({
name:'ht',
age:19.
job:{
j1:{
salary:10
}
}
})
情况一:监视ref的一个响应式数据watch(sum,(newValue,oldValue)=>{
console.log('sum发生改变了',newValue,oldValue)
},{immediate:true})
情况二:监视ref的多个响应式数据,以数组的形式监听 watch([sum,user],(newValue,oldValue)=>{
console.log('sum或user发生改变了',newValue,oldValue)
},{immediate:true})
情况三:监视reactive定义的响应式数据 //若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue
//若watch监视的时reactive定义的响应式数据,则强制开启了深度监视,深度监视不生效*/
watch(person,(newv,oldv)=>{
console.log('person值发生了变化',newv,oldv)
},{immediate:true;deep:true})
情况四:监视reactive的某一个属性 watch(()=>person.age,(newv,oldv)=>{
consle.log('age发生了变化',newv.oldv)
},{immediate:true;deep:true})
情况五:监视reactive多个属性 watch([()=>person.name,()=>person.age],(newv,oldv)=>{
console.log('name或age变化了',neldv)
},{immediate:true;deep:true})
情况六:特殊情况 reactive监视对象的某个属性,该属性多层嵌套,必须开启深度监视watch(()=>person.job,(newv,oldv)=>{
console.log('job发生改变',newv,oldv)
},{deep:true})
当监视ref定义的对象式响应数据类型//当监视ref定义的对象式响应数据类型(1)
watch(person1.value,(newv,oldv)=>{
console.log('person1发生了变化',newv,oldv)
})
//当监视ref定义的对象式响应数据类型(2),舍弃1,person.value监视的是RefImpl对象
watch(person1,(newv,oldv)=>{
console.log('person1发生了变化',newv,oldv)
},{deep:true})