Vue3 watch的五种情况，注意事项与watchEffect函数（学习笔记）

• 与Vue2.x中watch配置功能一致
• ps：
  监视reactive定义的响应式函数时，oldValue无法正确获取，深度监听默认开 启（deep配置失效）。
  监听reactive定义的响应式函数中的某个属性时，deep配置有效

情况一：监听ref定义的响应式数据

watch(sum,(newValue,oldValue)=>{
	console.log(newValue,oldValue);
},{immediate:true})

情况二：监听多个ref定义的响应式数据

watch([sum, age],(newValue,oldValue)=>{
	console.log(newValue,oldValue);
})

情况三：监听reactive定义的响应式数据

• 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue
• 若watch监视的是reactive定义的响应式数据，则强制开启深度监视

watch([person.job, person.age],(newValue,oldValue)=>{
	console.log(newValue,oldValue);
},{ immediate:true, deep:false }) //此处的deep配置不再奏效

情况四：监听reactive定义的响应式数据中的某个属性

watch(()=>person.job,(newValue,oldValue)=>{
	console.log(newValue,oldValue)
})

情况五：监听reactive定义的响应式数据中的多个属性

watch([()=>person.job,person.age ],(newValue,oldValue)=>{
	console.log(newValue,oldValue)
})

特殊情况

watch(()=>person.job,(newValue,oldValue)=>{
	console.log(newValue,oldValue)
},{ deep:true })
//此处监视的是reactive定义的对象中的某个属性，所以deep配置有效。

watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调
• watchEffect的套路是：不用指明监视那个属性，监视的回调中用到那个属性，那就监视那个属性
• watchEffect有点像computed
  - 但computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值。
  - 而watchEffect更注重的是过程（回调函数的函数体）。所以不用写返回值。

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