做网站有什么框架seo全站优化全案例
1. 核心功能与状态管理
• 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];
}
2. 框架依赖性与复用范围
• Composables
深度依赖 Vue3 的组合式 API（如 ref、生命周期钩子），通常以 use 前缀命名（如 useFetch、useEventListener），适用于 Vue 组件内部复用逻辑，且每个组件实例会创建独立的状态。
• Utils
与框架无关，可以是纯 JavaScript/TypeScript 函数，适用于任何技术栈（如 React、原生 JS）。例如，字符串处理、数学计算等工具函数。
3. 适用场景
• Composables
• 需要响应式状态管理的场景（如 API 请求、事件监听）。
• 需要复用包含生命周期逻辑的功能（如组件挂载时初始化数据）。
• 需要组合多个逻辑（如将 useMouse 和 useEventListener 嵌套使用）。
• Utils
• 纯数据转换（如日期格式化、对象深拷贝）。
• 通用辅助功能（如防抖/节流、验证函数）。
• 与 UI 无关的逻辑（如数学计算、本地存储操作）。
4. 代码结构与设计目标
• Composables
强调逻辑的组合性，通过函数返回值暴露状态和方法，支持按需组合多个功能模块。例如，一个复杂的表单逻辑可以拆分为 useValidation 和 useSubmit。
• Utils
强调单一职责，每个函数独立完成一个任务，不涉及状态管理。例如，capitalize 函数仅将字符串首字母大写。
5. 命名规范与类型支持
• Composables
遵循以 use 开头的命名约定（如 useCounter），并通过 TypeScript 提供强类型推导（如返回的 ref 值自动推断类型）。
• Utils
命名更灵活（如 formatDate、deepClone），类型支持取决于具体实现，不强制依赖 Vue 的类型系统。
总结对比表
| 特性 | Composables | Utils |
|---|---|---|
| 状态管理 | 有状态（响应式数据） | 无状态（纯函数） |
| 框架依赖 | 依赖 Vue3 的组合式 API | 框架无关 |
| 典型场景 | 组件逻辑复用（如 API 请求、事件） | 通用数据处理（如格式化、计算） |
| 代码示例 | useMouse() 跟踪鼠标位置 | formatDate() 格式化日期 |
| 命名规范 | 以 use 开头 | 无强制规范 |