怎样在 Vue3 中使用 reactive 实现一个计数器组件

Counter.vue

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      count: 0,
      increment: () => {
        data.count = data.count + 1;
      },
    });
    const refData = toRefs(data); // 解构响应式 data
    return { ...refData };
  },
};
</script>