高级vue 组合api setup watch监听用法

<script>

import { computed, watch } from 'vue';

import {ref,reactive,toRefs} from 'vue'

export default{

    setup(){

      let data=reactive({

        mes:6,

        userObj:{

          userName:'www.96net.com.cn'

        },

      });

      const add=()=>{

        data.mes++;

        console.log(data.mes)

      }

      watch(()=>data.mes,(newvalue,oldvlaue)=>{

                   console.log('n'+newvalue)

                   console.log('o'+oldvlaue)

      })

      return {

        ...toRefs(data),

        add,

      }

    }

}

</script>

<template>

  <div id="as">

    {{mes}}

    <br>

  </div>

  <button @click="add">+</button>

</template>

<style scoped>

</style>