vue3 watch几种情况和坑

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

两个小“坑”:

监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视 (deep配置失效)

监视reactive定义的响应式数据中某个属性时: deep配置有效

//情况一: 监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
  console.log('sum变化了,newValue,oldValue)
},{immediate:true})

//情况二:监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
  console.log('sum或msg变化了,newValue,oldValue)
})

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

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

//情况五:监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.name, ()=>person.age], (newValue,oldValue)=>{
  console.log('person的name或age变化了,newValue,oldValue)
})

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

//当监视用ref定义的对象或数组类型的数据是可以用 
// 1.name.value
watch(person.value,(newVal,oldVal)=>{
  console.log(newVal,oldVal);
})
//2.配置deep:true
watch(person,(newVal,oldVal)=>{
  console.log(newVal,oldVal);
},{deep:true})