vue3标准组件<script> 需要写setup函数并繁琐retrun如下

<script>
import { ref, reactive } from 'vue';
export default{
  setup(){
    let a = ref('a')
    let b = ref('b')
    let num = ref(0)
    let person = reactive({
        name: 'zs',
        age: 18
    }),
    let add = ()=>{
      num.value++;
      person.age++;
    }
    
    return {
      a,
      b,
      num,
      person,
      add
    }
  }
}
</script>

<template>
  <div>
    {{ a+b+num }}
    name: {{ person.name }} age: {{ person.age }}
    <div @click="add">click add</div>
  </div>
</template>

数据少还好，如果数据很多呢，就要在return中写很多，有没有什么方法可以减少return中的代码呢？
如下：用一个data，methods来统一管理属性与方法，只需要在return中解构data与methods即可

<script>
import { ref, reactive } from 'vue';
export default{
  setup(){
    let data = {
      a: ref('a'),
      b: ref('b'),
      num: ref(0),
      person: reactive({
        name: 'zs',
        age: 18
      }),
    }
    let methods = {
      add(){
        data.num.value++;
        data.person.age++;
      }
    }
    return {
      ...data,
      ...methods
    }
  }
}
</script>

<template>
  <div>
    {{ a+b+num }}
    name: {{ person.name }} age: {{ person.age }}
    <div @click="add">click add</div>
  </div>
</template>