以下是 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 不支持。