Vue3 - 监听(watch函数、watchEffect函数)
1、watch函数(既要指明监视的属性,也要指明监视的回调)坑:1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)2)监视reactive定义的响应式数据中某个属性时:deep配置有效setup(){let sum = ref(0)let msg = ref('ABCD')let person = reactive({name:'张三'
·
1、watch函数(既要指明监视的属性,也要指明监视的回调)
坑:
1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)
2)监视reactive定义的响应式数据中某个属性时:deep配置有效
setup(){
let sum = ref(0)
let msg = ref('ABCD')
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
//情况一:监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
},{immediate:true})
//情况二:监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或msg变化了',newValue,oldValue)
})
/* 情况三:监视reactive定义的响应式数据
若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!!
若watch监视的是reactive定义的响应式数据,则强制开启了深度监视
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效
//情况四:监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})
//情况五:监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})
//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
}
2、watchEffect函数(不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性 )
watchEffect不需要指定监听的属性,它会自动的收集依赖, 只要我们回调中引用到了 响应式的属性, 那么当这些属性变更的时候,这个回调都会执行
watchEffect有点像computed,更注重的是过程(回调函数的函数体),不用写返回值
watchEffect(() => console.log(userID))
更多推荐
已为社区贡献4条内容
所有评论(0)