目录

一                、监听基础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>