当前位置：首页 > news >正文

【Vue】Composables 和 Utils 区别

news 2025/7/1 13:27:00

• Composables

用于封装有状态的逻辑，通常结合 Vue 的响应式 API（如 ref、reactive）和生命周期钩子（如 onMounted），可管理组件内部的状态和副作用。例如，封装鼠标位置跟踪功能时，会维护 x 和 y 的响应式变量。

// 示例：封装鼠标位置的 Composable
export function useMouse() {const x = ref(0);const y = ref(0);onMounted(() => { /* 监听事件 */ });return { x, y };
}

• Utils

用于处理无状态的纯逻辑，如数据格式化、数组操作等。它们不依赖 Vue 的响应式系统，也不涉及组件状态。例如，日期格式化工具函数仅接收输入并返回结果：

// 示例：日期格式化工具
export function formatDate(date) {return date.toISOString().split('T')[0];
}

• Composables

深度依赖 Vue3 的组合式 API（如 ref、生命周期钩子），通常以 use 前缀命名（如 useFetch、useEventListener），适用于 Vue 组件内部复用逻辑，且每个组件实例会创建独立的状态。

• Utils

与框架无关，可以是纯 JavaScript/TypeScript 函数，适用于任何技术栈（如 React、原生 JS）。例如，字符串处理、数学计算等工具函数。

• Composables

• 需要响应式状态管理的场景（如 API 请求、事件监听）。

• 需要复用包含生命周期逻辑的功能（如组件挂载时初始化数据）。

• 需要组合多个逻辑（如将 useMouse 和 useEventListener 嵌套使用）。

• Utils

• 纯数据转换（如日期格式化、对象深拷贝）。

• 通用辅助功能（如防抖/节流、验证函数）。

• 与 UI 无关的逻辑（如数学计算、本地存储操作）。

• Composables

强调逻辑的组合性，通过函数返回值暴露状态和方法，支持按需组合多个功能模块。例如，一个复杂的表单逻辑可以拆分为 useValidation 和 useSubmit。

• Utils

强调单一职责，每个函数独立完成一个任务，不涉及状态管理。例如，capitalize 函数仅将字符串首字母大写。

• Composables

遵循以 use 开头的命名约定（如 useCounter），并通过 TypeScript 提供强类型推导（如返回的 ref 值自动推断类型）。

• Utils

命名更灵活（如 formatDate、deepClone），类型支持取决于具体实现，不强制依赖 Vue 的类型系统。

总结对比表