vue3 watch函数

与Vue2.x中watch配置功能一致
两个小坑

监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视(deep配置失效)
监视reactive定义的响应式数据中某个属性时：deep配置有效

//监视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.name,()=>person.age],(newValue,oldValue)=>{
      console.log('person的name或age变化了',newValue,oldValue)
})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true})//此处由于是监视的是reactive素定义的对象中的某个属性，所以deep配置有效