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>