SuperAPI AI 工具集

vue-composables

前端与建站

查看项目

更新于 10-16 04:58

技能介绍

用途:这是一份 Vue 3 Composables 风格指南,用于在创建新 composable、重构已有 composable 或需要遵循既定模式时,写出结构清晰、职责单一的组合式函数。

主要能力与规则:

  1. 命名约定:文件以 use 前缀加 PascalCase 命名,如 useCounter.ts、useApiRequest.ts,放在 src/composables/ 目录;函数使用描述性名称(useUserData() 而非 useData()),并以具名函数导出。
  2. 结构模板:按固定顺序组织代码——初始化(setup 逻辑、router、外部依赖)、主要状态、状态元数据(status、error、loading)、computed 派生状态、方法、生命周期钩子(如 onMounted)、watchers,最后统一 return。
  3. 单一职责:一个 composable 只做一件事,避免混入无关关注点。
  4. 暴露错误状态:返回 error ref 交由组件处理,不要吞掉错误,也不要在 composable 中直接展示 UI(如 console.error 或 showToast)。
  5. 不在 composable 中写 UI 逻辑:只返回状态与逻辑,UI 由组件负责。
  6. 参数设计:4 个及以上参数时使用对象参数;少量参数可用位置参数。
  7. 状态分组:4 个及以上相关联的状态属性应归入单个 ref 对象,并在 reset 等操作中整体处理;1 至 3 个不相关属性可用独立 ref。
  8. 函数核心与命令式外壳:可将纯逻辑抽成无副作用、易测试的纯函数,再由 composable 结合响应式使用。

适用场景:Vue 3 项目中新建或重构 composable,需要统一代码风格、分离状态与 UI、规范参数与错误处理的团队开发场景。

限制:资料仅提供风格与规则说明,未提供安装方式、依赖版本、示例项目入口或工具链集成说明,这些内容暂未提供。