vue3中的watch能够监听那些值？（总结）

• 只能是vue响应式中的值（包括ref，reactive定义的值）

• watch的使用场景：

  1. 可以监听ref定义的值，如果ref定义的值为一个基本类型的值

     const name=ref<string>('tang')
     watch(name,()=>{})
     const info=ref<{city:string,location:string}>={
       city:'chongqing',
       location:"hechuan"
     }
     // 监听单一数据源例如：city
     watch(()=>info.value.city,(newCity,oldCity)=>{})
     // 监听整个info对象,注意：这样的info.value其实是一个对象的引用地址，所以newInfo和oldInfo拿到的值是一样的
     watch(info.value,(newInfo,oldInfo)=>{},[options])
     // 通过单一数据源的getter函数的方式监听,这样newIfo,oldInfo得到的对象是正确的
     watch(()=>({...info.value}),(newInfo,oldInfo)=>{},[options])
     

  2. 监听reactive创建的响应式对象

     const info=reactive<{city:string,location:string}>({
       city:'chongqing',
       location:'hechuan'
     })
     // 监听整个info对象,注意这个同上面一样监听的其实是info的是响应式引用对象的地址，newInfo,oldInfo的是同一个对象打印的是一样的
     watch(info,(newInfo,oldInfo)=>{}[,options])
     // 改善：通过单一数据源的getter函数的形式去写
     watch(()=>({...info}),(newInfo,oldInfo)=>{}[,options])
     // 监听info对象的单一数据源,getter函数方式
     watch(()=>info.city,(newCity,oldCity)=>{})
     

  3. 监听组件中的某个props中的动态属性

     注意：为什么可以监听到props中的值呢？个人思考是因为组件在使用的通过props来传递参数时如果想到达实现动态传递参数时，一般都是通过ref跟reactive对象去定义的，所以在组件的内部同样可以通过监听ref，reactive的方式去监听prop的变化

     props:{
      name:{
        type:String
      },
      info:{
        type:Object as propType<IInfo>
      }
     }
     
     setup(props){
       // 如果监听的prop为本身就是一个基本类型的值，则只能通过单一数据源的方式监听不然编辑器会提示报错（vscode+volar）
       watch(()=>props.name,(newName,oldName)=>{})
       // 监听的prop为对象形式,同样会存在监听的新值跟旧值是一样的，因为是同一个引用对象地址
       watch(props.info,(newInfo,oldInfo)=>{}[,options])
       // 改善建议写法：
       watch(()=props.info,(newInfo,oldInfo)=>{}[,options])
     }
     

  4. 一次监听多个响应式的值

     wacth([value1,value2],([newValue1,newValue2],[oldValue1,oldvalue2])=>{}[,options])
     

  5. 补充知识点：

     • ref定义的值是Ref的一个实例对象，所以ref创建出来的值本身才是响应式对象 ，对象value中保存的值是一个proxy代理对象，所以在通过watch去监听时直接将整个ref的对象当作整个监听的数据源传递进去。如果要监听ref的value对象，需要用到getter函数这个单一数据源的方式去监听，把value对象当成一个单一数据源去监听

       const name=ref<string>('tang')
       watch(name,(newValue,oldValue)=>{})
       watch(()=>name.value,(newValue,oldValue)=>{})
       console.log(isProxy(name),isRef(name),isProxy(name.value)) // false,true,true
       

 - reactive跟readonly创建的对象用是proxy对象，可以用isProxy去检测返回true

 ```javascript
   const info=reactive({})
   const obj=readonly({})
   const readOnlyObj=readonly(info)
   console.log(isProxy(info),isProxy(obj)) // true,true
   console.log(isReadonly(readOnlyObj),isReactive(readOnlyObj)) //true,true
   ```