Vue3 中 ＜script setup＞ 场景下，需要手动导入和不需要手动导入的内容整理
以下是 Vue3 中 <script setup> 场景下，需要手动导入和不需要手动导入的内容整理（按使用场景分类）：
| 分类 | 需要手动导入（必须 import） | 不需要手动导入（直接使用） |
|---|---|---|
| 响应式与状态 | - ref、reactive、computed（计算属性）- watch、watchEffect（数据监听）- 示例： import { ref, computed } from 'vue' | 无（响应式 API 均需导入） |
| 生命周期钩子 | - onMounted、onUpdated、onUnmounted 等（组件生命周期）- 示例： import { onMounted } from 'vue' | 无（生命周期钩子均需导入） |
| 组件与模板 | - 非组件的工具类（如 useSlots、useAttrs 用于脚本中访问插槽/属性）- 示例： import { useSlots } from 'vue' | - 导入的组件（直接在模板使用，无需注册） 示例： import Child from './Child.vue' 后直接用 <Child/> |
| 编译器宏（核心） | 无（宏函数由编译器处理，无法导入） | - defineProps（声明 props）- defineEmits（声明事件）- defineExpose（暴露组件内容）- defineOptions（声明组件选项，Vue3.3+）- defineModel（双向绑定简化，Vue3.4+）示例： const props = defineProps({ title: String }) |
| 特殊语法与变量 | - nextTick（DOM 更新后执行）- 工具函数（ isRef、unref、toRefs 等）示例： import { nextTick, isRef } from 'vue' | - 顶层 await（直接使用，无需包裹 async）示例： const data = await fetch(...)- 模板中直接使用 $attrs、$slots（脚本中需通过 useAttrs/useSlots 导入）示例：模板中 <div v-bind="$attrs"></div> |
| 全局 API | - createApp、defineComponent、defineAsyncComponent 等（通常在入口文件使用）示例： import { createApp } from 'vue' | 无（全局 API 均需导入） |
关键说明：
- 编译器宏（
defineXXX）：是<script setup>专属语法，由 Vue 编译器直接解析，绝对不能导入（导入会报错）。 - 组件自动注册：仅在
<script setup>中导入的组件有此特性，选项式 API 仍需手动注册到components选项中。 - 模板 vs 脚本：
$attrs、$slots在模板中可直接使用，但在<script setup>脚本中需通过useAttrs()、useSlots()导入后访问。 - 版本兼容性：
defineOptions（3.3+）、defineModel（3.4+）是新增宏，低版本 Vue 不支持。