vue3 watch函数

• 两个小坑
  • 监视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
           })