组合式函数是vue 3逻辑解耦的核心方式，通过封装带状态、生命周期和副作用的行为实现可复用单元；如usemouseposition跟踪鼠标位置、uselistrequest管理数据请求、useauth处理认证状态，并支持嵌套组合与单向依赖。
组合式函数（Composables）是 Vue 3 实现逻辑解耦最自然、最落地的方式——它不是把代码“搬出去”，而是把带状态、带生命周期、带副作用的一整套行为封装成可即插即用的单元。
useMousePosition：封装带事件监听的响应式状态
鼠标位置跟踪这类逻辑，既需要实时响应数据（x/y），又依赖挂载/卸载时机绑定和清理事件，还涉及 DOM 副作用。直接写在组件里容易遗漏清理，复用时还要重复粘贴。
- 用 ref 管理 x、y 的响应式值
- 在 onMounted 中添加 mousemove 监听器
- 在 onUnmounted 中自动移除监听，杜绝内存泄漏
- 返回 { x, y }，调用方解构后可直接用于模板或计算属性
useListRequest：封装带加载态与错误处理的数据请求逻辑
列表页的拉取逻辑几乎每个业务模块都会出现：发请求、设 loading、存数据、捕获错误、支持手动刷新——这些不该散落在各个 setup 里。
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
- 接收 url 和可选的默认参数，不硬编码路径
- 内部用 ref 管理 list / loading / error，保证响应性
- 首次请求在 onMounted 触发，避免组件未挂载就调用 API
- 暴露 fetchList（立即执行）和 fetchListDebounce（防抖版），适配不同交互场景
- 在 onUnmounted 清理可能存在的 pending 定时器或 AbortController
useAuth：封装用户认证状态与行为
登录、登出、token 管理、权限判断等，是跨多个页面的通用能力。它有明确的状态（user）、副作用（localStorage 写入、HTTP 请求）和生命周期关联（token 过期自动清理）。
- 用 ref 存 user 和 error，用 computed 衍生 isLogin 等状态
- login 方法内统一处理请求、赋值、持久化
- 可配合 watch 监听 user 变化，自动同步到 localStorage 或触发路由跳转
- 不控制 UI（比如不弹 toast），只提供状态和动作，由组件决定如何呈现
嵌套与组合：让逻辑真正可组装
一个组合式函数可以内部调用另一个，形成清晰的责任链。例如 useListRequest 可以复用 useLoading 来统一管理 loading 状态，而 useLoading 又可能基于 useTimeout 实现延迟显示。
- 保持单向依赖：A → B，禁止 A ↔ B 循环引用
- 每个函数只做一件事，接口最小化（比如只返回必要 ref 和函数）
- 命名统一以 use 开头，语义明确，如 useDarkMode、useWindowSize、useFormValidation
- 在 <script setup></script> 中直接 import 并解构，变量天然响应式，无需额外处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
