Vue 3 的 ＜script setup＞ 语法糖与 TypeScript 的深度整合

在 Vue 单文件组件中，<script> 标签除了 lang、async、defer、src 和 name 属性外，还有一些其他重要属性和用法值得关注。以下是补充说明及优化建议：

一、setup 属性（Composition API 核心）

作用：通过 setup 属性启用 Vue 3 的 Composition API，简化逻辑组织和复用。
代码示例：

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)
onMounted(() => {
  console.log('组件挂载完成')
})
</script>

优势：

• 逻辑复用：可将复杂逻辑拆分为组合式函数（如 useFetch）
• 自动暴露：顶层变量和函数自动暴露给模板，无需手动 return
• 类型友好：与 TypeScript 深度集成，支持更精准的类型推导

二、generic 属性（TypeScript 泛型支持）

作用：在 Vue 3.3+ 中，通过 generic 声明泛型参数