记录学习vue3过程中watch监听遇到的各种问题（2024.03.28补充更新）

1. 在vue3中使用watch监听ref的一个数据变化

setup(){
    let num = 1 

    watch(num,(newVal,oldVal)=>{
        console.log(newVal,oldVal)
    })

    return {
        num,
    }
}

监听一个基本类型数据，能够正常监听，并且新旧数据都能够监听到，

1.1 如果监听的是ref定义的对象数据

值得注意的是修改ref定义的对象数据时可以将整个对象直接赋值

let person = ref({
  name:'张三',
  age:18
})

function changePerson(){
  person.value = {name:'李四',age:90}
}

watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},{deep:true})

开启deep: true，才能够监听到对象中属性的变化，由于地址值没有改变，只是属性值改变了，所以新旧值都是属性值改变之后的对象

如果修改的是整个对象，则新旧数据会不同

 2. 在vue3中使用watch监听ref的多个数据变化

watch([num,msg], (newVal, oldVal) => {
   console.log(newVal, oldVal);
})

监听多个基本数据类型，能够正常监听，并且新旧数据都能够监听到，

3. 在vue3中使用watch监听reactive的数据变化

setup(){
    const person = reactive({
       name: "小明",
       age: 25,
       job: {
          j1: {
              salary: 14
          }
       }
    })

    const arr = reactive([1,2,3,4,5])

    watch(person, (newVal, oldVal) => {
        console.log(newVal, oldVal);
    }, {deep: false})

    watch(arr, (newVal, oldVal) => {
        console.log(newVal,oldVal);
    })

    return {
        person,
        arr
    }
}

此时就有问题了！！！

• 通过这种方式监听不到旧数据，只能获取新数据（通过reactive定义的对象不能直接通过字面量的方式修改数据，丢失响应式）

（对上面问题新的理解：因为监听的是整个对象，修改的只是对象当中的某个属性，地址值并没有改变，所以监听到的还是原地址的数据，只是属性值变化了，所以新旧值相同，此外！！如果通过Object.assign等方式整体修改了对象，相当于地址值发生了变化，监听的就是新地址值，故展示的都是新值）

• 只要监听的是一个复杂类型，就默认开启了deep：true，并且无法修改

4. 在vue3中使用watch监听reactive中的属性

watch(() => person.name, (newVal, oldVal) => {
    console.log(newVal, oldVal);
})

watch([() => person.name,() => person.age], (newVal, oldVal) => {
    console.log(newVal, oldVal);
})

监听对象中的属性的时候需要使用函数返回值的写法，否则监听不到，监听多个属性的时候可以使用数组的写法，同监听基本数据类型

5. 在 vue3中使用watch监听对象中的对象

watch(() => person.job, (newVal, olaVal) => {
   console.log(newVal,olaVal);
},{deep: true})

此时又有问题了！！！

• 此时如果不开启深度监听，则会监听不到该属性的变化，必须开启深度监听{deep：true}
• 同监听复杂数据类型一样，监听不到旧数据 （理解同上）