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
        

vue3中的watch能够监听那些值?(总结)

 - 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
   ```
上一篇:Vue中computed和watch的区别


下一篇:Force to flash the build on the watch智能手表测试