vue3 watch 监控对象的坑 和 watchEffect 对比

watch 监听函数

注意:

 1.监听指定的属性{对象),被监听属性(对象)有变化后,会给出新旧两个参数
 
 2.监听函数注重过程,不能return结果
 
 3.可以同时监听多个属性(对象)
 栗子:  watch([firstname,lastname],([currvalue,currold],[perval,perold])=>{
	      console.log(`1`,currvalue,currold);
	      console.log(`2`,perval,perold);
	    })

与Vue2.x中watch配置功能一致

• 两个小坑
  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

//[正常]情况一：监视ref定义的响应式数据(属性)
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true /**开启首次监听*/})
//[正常]情况二：监视多个ref定义的响应式数据
watch([sum,msg],([currvalue,currold],[perval,perold])=>{
	console.log(`1`,currvalue,currold);
	console.log(`2`,perval,perold);
}) 
//[正常]情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//[正常]情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//[正常]特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

/* [坑]情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue) //此处的oldValue和newValue 一摸一样,这是个坑
},{immediate:true,deep:false}) //此处的deep配置不再奏效

watchEffect 监听函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
   const x1 = sum.value
   const x2 = person.age
   console.log('watchEffect配置的回调执行了')
})

微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用