vue3中watch监听ref reactive响应式数据写法及注意点

watch函数

  • 与vue2中watch配置一致
  • 两个小坑
    • 监视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})
    
posted @ 2022-09-22 11:13  胡同树下  阅读(2893)  评论(0)    收藏  举报