vue3中watch属性的使用

const person1 = ref(1)
const person2 = ref('a') 
const person3 = reactive({
    name: '小明',
    age: 18,
    job: {
        salary: 20,
        type: '前端'
    }
})
// 情况一，监视ref所定义的一个响应式数据时（基本类型），可以正常打印新旧值
watch(person1,(newVal,oldVal)=>{
    
})
// 情况二，同时监视多个ref定义的响应式数据时，使用数组包裹ref包裹的值，新旧值是对应于监视ref属性的数组
watch([person1,person2],(newVal,oldVal)=>{
    
})
// 情况三，监视reactive所定义的一个响应式数据时（都是对象），无法正确获取到oldVal，这里的oldVal打印出来的值和newVal一样，并且是默认开启深度监视(deep:true)，无法手动关闭，也就是说这里配置deep无效
watch(person3,(newVal,oldVal)=>{
    
})
// 情况四，监视reactive定义的一个响应式数据的一个属性(基本类型)时，这里必须写成函数形式，才能正确监视到，并且监视的是reactive定义的响应式数据的一个属性时，是可以获取到oldVal的
watch(()=>person3.name,(newVal,oldVal)=>{
    
})
// 情况五，监视reactive定义的一个响应式数据的多个属性时（基本类型），在数组中使用函数形式，也可以获取到oldVal，新旧值与情况二相同
watch([()=>person3.name,()=>person3.age],(newVal,oldVal)=>{
    
})
// 情况六，监视reactive定义的响应式数据的一个属性（该属性是对象类型）时，无法获取到oldVal，可以手动配置deep，不会默认开启deep：true
watch(person3.job,(newVal,oldVal)=>{
    
},{deep:true})

// 只要监视的是对象形式的数据，不管是reactive直接定义的，或者是reactive的某个属性（对象），都无法正确获取到oldVal

vue3中监视该组件实例的5中使用场景