学习Vue3属实把我搞晕了

我看一天下来愣是看出来好多种语法和代码结构，麻了。

然后我搞这鬼样，我只是不想一个个return，太麻烦了， <script setup>写法还是很多搞不懂的地方，放着先。

<template>
  <div>
    <p>{{title}}</p>
    <input v-model="title" />
    <button @click="onChange">修改</button>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onBeforeMount } from 'vue';
export default {
  setup() {
    const state = reactive({
      beforeMounte: onBeforeMount(() => {
        console.log(11111111);
      }),

      mounted: onMounted(() => {
        console.log(22222222);
      }),

      title: '初始值',
      onChange: () => {
        state.title = '修改值'
      }
    })

    return {
      ...toRefs(state)  //利用ES6的扩展运算符解构对象，响应式reactive对象需要使用toRefs
    }
  }
}
</script>

这种直接把方法写进reactive里面是不是很影响性能（小白一个，勿喷）。