Vue——vue3中setup() watchEffect监听属性写法

<template>
    <h1 @click="changeName">改变用户名称：{{ name }}</h1>
    <h1 @click="changeNum">计数{{ num }}</h1>
</template>

import { ref, reactive, toRefs, watchEffect, watch } from 'vue'
export default {
  data () {
    return {
    }
  },
  methods: {
  },
  setup () {
    const num = ref(0)
    function changeNum () {
      num.value += 20
    }
      
      
    const user = reactive({
      age: '18',
      name: '小明',
    })

    function changeName () {
      user.name = '小红'
    }
    // 统一监听
    watchEffect(() => {
      console.log(user.name)
      console.log('user.name改变了')
    })

    //单独监听,如监听num
    watch(num, (newNum, prevNum) => {
      console.log(newNum, prevNum);
      console.log('num改变');
    })

    //多个监听,用[]
    watch([num, user], (newNum, prevNum) => {
      console.log(newNum, prevNum);
      console.log('num,user改变');
    })
    return { num, changeNum, ...toRefs(user), changeName }
  },

}
</script>