Vue3 watch监视 reactive

一、引入

import {reactive, watch } from 'vue'

二、注意

1、监视reactive定义的响应式对象时，oldval无法正确获取，强制开启深度监视，无法关闭

2、监视reactive对象的某个属性时，deep有效(属性为对象)，属性为字符串或数字 oldvalue可以正常获取

三、四种情况

1、情况一

监听reactive对象，oldvalue值不变，且强制深度监视，无法关闭

export default {
    name:'DemoData',
    setup() {
       let person = reactive({
            name:'jj',
            age:8,
            job:{
                salary:10
            }
       })     
    //1、 监视 person oldval无效，且强制开启深度监视，无法关闭
    watch(person,(newvalue, oldvalue) => {
        console.log('监视person', newvalue, oldvalue)
    })
    return {
        person
    }
}

2、情况二

监视reactive对象中的属性，且该属性不是对象，可以获得oldValue

setup() {
   let person = reactive({
        name:'jj',
        age:8,
        job:{
            salary:10
        }
   })     
    //2、监视 reactive对象属性，且该属性不为对象，可以获得oldValue
    watch(() =>person.name,(newVal, oldVal) => {
        console.log('name变化', newVal, oldVal)
    })
    return {
        person
    }
}

3、情况三

监视reactive对象的多个属性且该属性不为对象，可以获得oldvalue

setup() {
   let person = reactive({
        name:'jj',
        age:8,
        job:{
            salary:10
        }
   })     
    //3、监视reactive对象的多个属性且该属性不为对象，可以获得oldvalue
    watch([() => person.name, () => person.age],(newVlaue, oldvalue) => {
         console.log('name and age变化', newVlaue, oldvalue)
    })
    return {
        person
    }
}

4、情况四

监视reactive对象中的对象属性，该对象中的属性变化 需要开启深度监听，且oldvalue无效

setup() {
   let person = reactive({
        name:'jj',
        age:8,
        job:{
            salary:10
        }
   })     
    //4.监视reactive对象中的对象属性 中的属性，需要开启深度监听，且oldvalue无效
    watch(() => person.job,(newvalue, oldvalue) => {
        console.log('job中的slary变化', newvalue, oldvalue)
    },{deep:true})

    return {
        person
    }
}