-
只能是vue响应式中的值(包括ref,reactive定义的值)
-
watch的使用场景:
-
可以监听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])
-
监听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)=>{})
-
监听组件中的某个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]) }
-
一次监听多个响应式的值
wacth([value1,value2],([newValue1,newValue2],[oldValue1,oldvalue2])=>{}[,options])
-
补充知识点:
-
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
```