# Vue 3 可组合样式指南 ## 命名约定 ### 文件 * 前缀为 `use` 并使用 PascalCase: `useCounter.ts`, `useApiRequest.ts` * 放置在 `src/composables/` 目录中 ### 函数 * 使用描述性名称：`useUserData()`而不是`useData()` * 导出为命名函数：`export function useCounter() {}` ## 结构模板始终遵循以下顺序：从“vue”导入{计算，onMounted，ref，watch} 导出函数 useExample() { // 1. 初始化 - 设置逻辑、路由器、外部依赖 // 2. Primary State - 主要反应状态常量数据 = ref<数据 |空>(空) // 3. 状态元数据 - 状态、错误、加载 const status = ref<'空闲' | '加载' | '成功' | '错误'>('空闲') 常量错误 = ref<错误 |空>(空) // 4. 计算-导出状态 const isLoading = Computed(() => status.value === '正在加载') // 5. 方法 - 状态操作 const fetchData = async () => { 状态值='正在加载' 尝试{ // 获取逻辑状态值='成功' } 抓住（e）{ 状态.值 = '错误' error.value = e instanceof 错误？ e ：新错误（字符串（e）） } } // 6. 生命周期钩子已安装（（）=> { // 初始化逻辑 }) // 7. 观察者观察（数据，（新值）=> { // 对变化做出反应 }) 返回 { 数据、状态、错误、isLoading、fetchData } } ## 核心规则 ### 单一职责一种可组合性 = 一种用途。避免混合不相关的问题。 // 好 - 专注于一项任务导出函数 useCounter() { 常量计数 = ref(0) 常量增量 = () => { 计数值++ } const 减量 = () => { 计数值-- } 返回 { 计数、增量、减量 } } // 不好 - 混合用户数据和计数器导出函数 useUserAndCounter() { 常量用户 = ref(null) 常量计数 = ref(0) // ... 复杂的担忧 } ### 暴露错误状态返回组件处理的错误。切勿吞下错误或直接显示 UI。 // 好常量错误 = ref<错误 |空>(空) 尝试{ 等待 fetchData() } 抓住（e）{ error.value = e instanceof 错误？ e ：新错误（字符串（e）） } 返回{错误} // BAD - 吞下错误或显示 UI 尝试{ 等待 fetchData() } 抓住（e）{ console.error(e) // 被吞掉 showToast('Error!') // 可组合中的 UI } ### 可组合项中没有 UI 逻辑让可组合项专注于状态/逻辑。处理组件中的 UI。 // 好 - 可组合返回状态导出函数 useUserData(userId: string) { const 用户 = ref<用户 |空>(空) 常量错误 = ref<错误 |空>(空) const fetchUser = async () => { /* ... */ } 返回 { 用户、错误、fetchUser } } // 组件处理 UI const { 错误 } = useUserData(userId) 手表（错误，（e）=> { 如果（e） showToast('发生错误') }) ### 4 个以上参数的对象参数 // 好 - 许多参数的对象 useUserData({ id: 1, fetchOnMount: true, token: 'abc', locale: 'en' }) // 好 - 几个参数的位置 useCounter(初始值, 步骤) // 不好 - 位置参数太多 useUserData(1, true, 'abc', 'en', false, '默认') ### 将相关状态分组到对象中当可组合项具有 4 个以上相关状态属性时，请将它们分组为单个“ref”对象，而不是单独的 ref。 // 好 - 4 个以上相关属性的分组状态接口表单状态{ 名称：字符串电子邮件：字符串电话：字符串地址：字符串 } 导出函数 useContactForm() { const form = ref({ 名称：''，电子邮件：''，电话：'', 地址：''， }) 函数重置（）{ form.value = { 姓名：''，电子邮件：''，电话：''，地址：'' } } 返回 { 表单，重置 } } // 好 - 1-3 个不相关属性的单独引用导出函数 useToggle() { const isOpen = ref(假) const isLoading = ref(假) 返回 { isOpen, isLoading } } // 不好 - 相关状态有许多单独的参考导出函数 useContactForm() { 常量名称 = ref('') const 电子邮件 = ref('') const 电话 = ref('') 常量地址 = ref('') // ...变得难以管理和重置 } ### 功能核心，命令式外壳当有益时从 Vue 反应性中提取纯逻辑。 // 纯函数（可测试，无副作用）函数calculateTotal(items: ReadonlyArray) { 返回 items.reduce((sum, item) => sum + item.price, 0) } // 可组合使用纯函数导出函数 useCart() { const items = ref>([]) const 总计 = 计算(() => 计算总计(items.value)) 返回 { 项目，总计 } } ## 快速参考方面|做|不要 ---|---|--- 命名| `useUserData`、`useFetchApi` | `useData`, `getData` 文件 | `composables/` 中的 `useCounter.ts` | `counter.ts` 任何地方错误 |返回“错误”参考 | `console.error()` 或 toast 用户界面|返回状态，处理组件中的 UI |可组合项中的“showModal()” 参数| 4 个以上参数的对象 |长位置参数列表状态| 4+ 相关属性的 `ref` 对象 |许多单独的参考文献焦点 |单一责任 |复杂的担忧

可组合视图

包含技能