// myComponent.tsx
import { defineComponent } from "vue";
// 在TSX组件的setup函数中，你可以这样使用Vue Router
import { useRouter } from "vue-router";
// 本地响应式数据变量使用
import { ref } from "vue";
import { reactive } from "vue";
import { useMainStore } from "@/pinia";
import { onMounted,onUnmounted } from "vue";
interface Props {message: string;
}
// 导入defineComponent: 从'vue'导入defineComponent函数，它是创建Vue组件的基础// Props接口定义: 在组件外定义一个接口Props来明确组件接受的属性及其类型// setup函数: Vue3引入的Composition API的核心，用于组件逻辑的初始化。在这里，你可以定义响应式数据、计算属性、方法等。// 返回 JSX: setup函数返回一个JSX元素，描述了组件的模板结构。你可以直接使用TypeScript变量和函数，
// 并且得益于TSX，所有属性和事件都有静态类型检查。
const MyComponent = defineComponent({props: {message: {type: String,required: true,default: "Hello, World!",},},setup(props: Props) {// 钩子函数（hooks）通常以函数的形式提供，// 这