vue3中watch的使用

<template>
  <div>
    <div>{{ girl }}</div>
    <div>{{ boy }}</div>
    <button @click="changeSex">changeSex</button>
  </div>
</template>

<script >
import { reactive, toRefs, watch, ref } from 'vue'
export default {
  name: 'Watch',
  setup() {
    const boy = ref('我是男孩')
    const index = ref(0)
    const data = reactive({
      girl: '我是女孩',
      changeSex: () => {
        data.girl = '我是男孩'
        boy.value = '我是女孩'
        index.value++
      },
    })
    watch([boy, index], (newvalue, oldvalue) => {
      console.log(newvalue, oldvalue)
    })
    return {
      ...toRefs(data),
      boy,
      index,
    }
  },
}
</script>

 vue3的watch监听多个值的时候，要传入数组的形式。

<template>
  <div>
    <div>{{ girl }}</div>
    <div>{{ boy }}</div>
    <button @click="changeSex">changeSex</button>
  </div>
</template>

<script >
import { reactive, toRefs, watch, ref } from 'vue'
export default {
  name: 'Watch',
  setup() {
    const boy = ref('我是男孩')
    const data = reactive({
      name: '小红',
      girl: '我是女孩',
      hobby: ['打篮球', '玩游戏', '听音乐'],
      job: {
        j1: {
          money: 10,
        },
      },
      changeSex: () => {
        data.girl = '我是男孩'
        boy.value = '我是女孩'
        data.job.j1.money++
      },
    })
    // 监听reactive数据
    /* 
        此时是有问题的：oldvalue会和newvalue数据保持一致，当data里面的任意值改变，都会触发该监听,强制开启深度监听，deep配置在此时是无效的
    */
    watch([() => data], (newvalue, oldvalue) => {
      console.log(newvalue, oldvalue)
    })
    //  监听reactive中的某个值
    // 基础类型值
    watch(
      () => data.name,
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue)
      }
    )
    // 数组 此时deep的配置生效(此处的oldVal也是有问题的)
    watch(
      () => data.hobby,
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue)
      },
      { deep: true }
    )
    // 对象  此时deep的配置生效(此处的oldVal也是有问题的)  若要监听对象内的money： data.job.j1.money 即可
    watch(
      () => data.job,
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue)
      },
      { deep: true }
    )
    // 监听reactive中的某些值
    // 都为基本数据类型   一切正常
    watch([() => data.name, () => data.girl], (newvalue, oldvalue) => {
      console.log(newvalue, oldvalue)
    })
    //基本数据类型+数组/对象  deep有效 基本数据类型oldVal正常  引用数据类型oldVal存在问题
    watch(
      [() => data.name, () => data.hobby],
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue)
      },
      { deep: true }
    )
    //引用数据类型+引用数据类型  deep有效  引用数据类型oldVal存在问题
    watch(
      [() => data.hobby, () => data.job],
      (newvalue, oldvalue) => {
        console.log(newvalue, oldvalue)
      },
      { deep: true }
    )
    return {
      ...toRefs(data),
      boy,
    }
  },
}
</script>