Vue3+ts项目练习一

// 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）通常以函数的形式提供，
    // 这