• 只能是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
   ```