目录

一               、监听基础ref类型

1 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、监听单个ref数据

2













、 监听多个ref数据

二
  
  
  
  
  
  
  
 、监听reactive类型

1 
  
  
  
  
  
  
 、监听对象中单个属性

 2 


 


 


 


 


 


 


 
、监听对象中多个属性

  3
 
 
 
 
 
 
 
、同时监听ref基本类型数据和reactive对象中的属性

 4  
   
   
   
   
   
   
  、监听整个对象

  5 

 

 

 

 

 

 

 
、监听对象中值为对象的属性

三

 

 

 

 

 

 

 
、watchEffect

一               、监听基础ref类型

1 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
、监听单个ref数据

2














、 监听多个ref数据

二                      、监听reactive类型

1 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、监听对象中单个属性

监听 user.more.iPhone 属性               ，那么只有当iPhone属性发生变更时 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，才会触发 watch 方法













，其他属性变更不会触发 watch 方法               。注意
  
  
  
  
  
  
  
 ，此时的第一个参数是一个箭头函数 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。

 2





















、监听对象中多个属性

  3               、同时监听ref基本类型数据和reactive对象中的属性

 4 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、监听整个对象

当监听整个对象时 
  
  
  
  
  
  
 ，只要这个对象有任何修改 


 


 


 


 


 


 


 
，那么就会触发 watch 方法













。无论是其子属性变更（如 user.name）
 
 
 
 
 
 
 
，还是孙属性变更（如 user.more.iPhone）...  
   
   
   
   
   
   
  ，都是会触发 watch 方法的
  
  
  
  
  
  
  
 。

  5













、监听对象中值为对象的属性

方式1：不用箭头函数 

 

 

 

 

 

 

 
，则可以不用deep:true

 方式二【推荐用箭头函数】：用箭头函数时

 

 

 

 

 

 

 
，则必须加上{deep:true}才能触发监听

我们发现newValue和oldValue的值都是一样的               ， 这是因为它们的引用指向同一个对象/数组

 推荐用箭头函数监听对象的原因就是 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，我们可以通过以下方式来使新旧值不一样

如果直接监听对象














，别说监听对象的改变了                      ，直接原对象都监听不到 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，如下：

 总结：监听对象时





















，如果不关心旧值               ，那么直接监听对象更方便 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，因为不用手动设置deep为true；如果关心旧值













，那么需要使用箭头函数
  
  
  
  
  
  
  
 ，并序列化 
  
  
  
  
  
  
 ，设置deep:true

三
  
  
  
  
  
  
  
 、watchEffect

不用指明监视哪个属性,监视的回调用到哪个属性 


 


 


 


 


 


 


 
，就去监视哪个属性

watch可以访问新值和旧值
 
 
 
 
 
 
 
，watchEffect不能访问 
  
  
  
  
  
  
 。 watch需要指明监听的对象  
   
   
   
   
   
   
  ，也需要指明监听的回调 


 


 


 


 


 


 


 
。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性
 
 
 
 
 
 
 
。 watch只有监听的值发生变化的时候才会执行 

 

 

 

 

 

 

 
，但是watchEffect不同

 

 

 

 

 

 

 
，每次代码加载watchEffect都会执行  
   
   
   
   
   
   
  。 <template> <div>nums:<input v-model="nums" /></div> <div>user.age:<input v-model="user.age" /></div> <button @click="user.more.iPhone = 22222">改变more</button> </template> <script setup> const nums = ref(1); const user = reactive({ name: "张三", age: 23, more: { iPhone: 1111, address: "aaa", }, }); watchEffect(() => { const x1 = nums.value; const x2 = user.age; const x3 = user.more.iPhone; console.log("watchEffect监听的回调执行了..."); }); watchEffect(() => { console.log("222222222..."); }); </script>