vue3.0的watch监听

<template>
  <div>count的值为---{{count}}</div>
  <button v-on:click="addCount">count的值加1</button>
  <hr>
  <div>num的值为---{{obj.num}}</div>
  <button v-on:click="addNum">num的值加1</button>
  <hr>
  <div>sex的值为---{{obj.gender.sax}}</div>
  <button v-on:click="changeSex">改变sex的值</button>
</template>
<script>
import {ref,reactive,watch} from 'vue'
export default {
  name:'App',
  setup(){
    // 触发监听
    // 1、监听ref数据
    let count = ref(0)
    function addCount(){
      count.value += 1
    }
     watch(count,(newvalue,oldvalue) => {
       console.log(newvalue,oldvalue)
    })
    // 2、监听reactive定义的数据
    let obj = reactive({
      num:0,
      gender:{
        sax:'男'
      }
    })
    function addNum(){
      obj.num += 1
    }
    function changeSex(){
      obj.gender.sax += 1
    }
    watch(obj,(newvalue,oldvalue) => {
      console.log('监听的是obj')
    })
    // 3、同时监听两个数据，一个是ref定义的，一个是reactive定义的
    watch([count,obj],(newValue,oldValue)=> {
      console.log(newValue,oldValue)
    })
    // 4、监听reactive中的某一个属性值的变化
    watch(() => obj.gender,(newValue,oldValue) => {
      console.log('监听的是sex')
      console.log(newValue,oldValue)
    },{
      deep:true,
      immediate:true
    })
    return {
      count,
      addCount,
      obj,
      addNum,
      changeSex
    }
  }
}
</script>