setup 脚本太长？手把手拆分模块到独立 JS

当 setup 脚本臃肿难读、维护困难甚至引发状态耦合时，最直接有效的解法是按业务功能将逻辑拆分为职责单一、可复用的 Composition API 函数（如 useLoginForm、useApiRequest、useToast），统一存放在 composables/ 目录下作为独立 JS 模块；每个函数专注一类事、返回清晰的状态与方法，配合 defineProps、defineEmits 和 defineOptions 显式声明接口，显著提升可读性、可维护性与跨组件复用能力——拆分不是为多而多，而是让代码真正“各司其职、随取随用”。

把所有初始化逻辑堆在单个 setup 脚本块里，不仅难读、难维护，还容易引发命名冲突和状态耦合。最直接有效的解法，是按业务功能或逻辑职责，把大块代码拆成多个独立的 Composition API 函数（也叫“组合式函数”），每个只专注一件事。

按功能边界切分，一个模块只做一类事

比如用户登录流程涉及表单校验、请求发送、错误提示、按钮禁用等，别全塞进 setup()。可以拆出：

• useLoginForm()：管理表单数据、校验规则、提交动作
• useApiRequest()：封装通用请求逻辑（loading、error、retry）
• useToast()：统一控制提示弹窗的显示/隐藏

每个函数返回明确的状态和方法，调用时解构即可，语义清晰、复用性强。

把逻辑抽成可导入的 .js 文件

新建 composables/ 目录，每个函数单独一个文件，例如：

import { ref, watch } from 'vue'

export function useSearch(fetchResults) {
  const keyword = ref('')
  const results = ref([])
  const loading = ref(false)

  watch(keyword, async (val) => {
    if (!val.trim()) return
    loading.value = true
    results.value = await fetchResults(val)
    loading.value = false
  })

  return {
    keyword,
    results,
    loading
  }
}

在组件中直接引入使用：

避免过度拆分，保持函数内聚性

不是越细越好。如果两个状态总是成对出现、逻辑强绑定（比如分页的 page 和 pageSize），就该放在同一个组合函数里，比如 usePagination()。拆分的核心标准是：能否被其他组件独立复用，以及修改它是否会影响不相关的功能。

配合 defineOptions 和 defineProps 提升可读性

拆分后，组件顶部的 defineProps 和 defineEmits 更重要了——它们是组件对外的契约。建议显式声明，而不是靠运行时推断。同时，用 defineOptions({ name: 'UserProfile' }) 明确组件名，便于调试和递归引用。

不复杂但容易忽略。拆完不是终点，定期回顾组合函数是否职责单一、参数是否精简、是否真被复用了，才是长期保持 setup 干净的关键。

终于介绍完啦！小伙伴们，这篇关于《setup 脚本太长？手把手拆分模块到独立 JS》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！