Vue单文件组件中script与组合式函数分离依靠目录结构、模块导入和Composition API约定实现，无需配置webpack/vite；通过创建src/composables/目录封装逻辑、在中按需导入使用、保持函数内聚可测试、配合defineProps/defineEmits明确契约。
Vue 单文件组件中，script 与组合式函数分离不是靠配置实现的，而是通过目录结构、模块导入和 Composition API 的设计约定来落地。核心目标是把逻辑职责抽离出去，让组件文件更轻量、可读性更强、复用性更高——这不需要修改 webpack/vite 配置，Vue 原生就支持。
1. 创建 composables 目录存放组合式函数
在项目中新建 src/composables/ 目录，每个 .js 或 .ts 文件封装一个明确职责的逻辑模块。例如：
-
useUserAuth.js：处理登录态、token 刷新、权限校验 -
useTableData.js：管理分页、排序、搜索、加载状态 -
useFormRules.js：统一表单校验规则与错误提示逻辑
这些文件导出的是标准的 Composition 函数，内部使用 ref、reactive、watch、onMounted 等 API，返回响应式状态和操作方法。
2. 在 .vue 组件中直接导入并使用
在 SFC 的 <script setup></script> 中，按需引入并解构：
<script setup>
import { useTableData } from '@/composables/useTableData'
import { useUserAuth } from '@/composables/useUserAuth'
const { list, loading, page, pageSize, fetchList } = useTableData()
const { userInfo, isLoggedIn, logout } = useUserAuth()
// 可继续组合多个逻辑，互不干扰
</script>
无需额外配置，Vite 或 Vue CLI 默认支持这种模块导入方式。函数内部的状态彼此隔离，不会产生命名冲突或副作用耦合。
3. 组合式函数内部保持内聚与可测试性
每个组合式函数应满足两个关键原则：
- 只暴露必要的响应式变量和函数，避免“大而全”的接口
- 接收外部依赖（如 API 方法）作为参数，而非硬编码，便于单元测试和替换
例如：useSearch(fetchApi) 比 useSearch() 更灵活，也更容易在不同环境注入 mock 实现。
4. 配合 defineProps / defineEmits 明确组件契约
拆分后，组件顶部的声明更重要了：
<script setup>
const props = defineProps({
initialPage: { type: Number, default: 1 }
})
const emit = defineEmits(['update:page', 'error'])
// 之后再导入和使用组合式函数
const { page, fetchList } = useTableData({ initialPage: props.initialPage })
</script>
这样既保留了组件对外的清晰接口，又把内部实现细节下沉到独立模块，真正实现“逻辑可插拔”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
