如何在Vue 3中正确使用组合api中的钩子

import { createApp, defineComponent } from 'vue';

const MyComponent = defineComponent({
  setup() {
    // 在这里使用组合API中的钩子
  }
});

import { ref, reactive, computed, watch } from 'vue';

const MyComponent = defineComponent({
  setup() {
    // 声明响应式数据
    const count = ref(0);
    const data = reactive({ name: 'John', age: 25 });

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 监听数据变化
    watch(count, (newValue, oldValue) => {
      console.log(`count变化：${oldValue} -> ${newValue}`);
    });

    // 返回需要在模板中使用的数据和方法
    return {
      count,
      data,
      doubleCount,
      increment() {
        count.value++;
      }
    };
  }
});

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <p>Name: {{ data.name }}</p>
    <p>Age: {{ data.age }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>