#Vue 3 组合式 API 封装 WebSocket 心跳重连：实现后台实时消息推送与断线自动恢复
在实时推送场景中，原生 WebSocket 缺乏心跳检测和自动重连机制，导致断线后页面成为数据孤岛。本文深入剖析僵死连接的隐患，对比手写类与 VueUse useWebSocket 的优劣，并基于组合式 API 封装一个支持心跳、指数退避重连、多连接管理的 composable，让组件只需关注业务消息处理，无需操心连接健康度。
git checkout标签：组合式 API
#Vue 3 组合式 API 封装原生拖放：打造自由拖拽排序看板
本文介绍如何用 Vue 3 组合式 API 封装原生 HTML5 拖放，实现可跨列拖拽的任务看板。从事件处理、状态管理到数据同步，详细讲解 useDragAndDrop 组合函数的编写与测试，避免第三方库的局限性，让你轻松控制拖拽逻辑。
git checkout
#用Vue 3组合式API封装浏览器通知与页面可见性，实现后台标签页消息聚合与免打扰
用户切到微信回了三句，再切回来——Notification API已经连发五条弹窗，遮住按钮、盖住表单、打断操作。这不是设计，是失控。Vue 3的ref和watch组合式API本该帮我们管住这事，但多数人直接在onMounted里调Notification.requestPermission()，再用new Notification()推送，压根没存状态、不判visibility、也不攒队列。结果就是：页面不可见时通知静默丢失；切回瞬间所有积压消息像推土机一样涌上来。本文教你用组合式API把document.hidden和Notification两套独立系统焊在一起，实现后台标签页消息聚合与免打扰。
git checkout
#Vue 3 组合式 API 封装 WebRTC 屏幕共享与远程协作标注
远程会议中屏幕共享后如何实时标注？本文用 Vue 3 组合式 API 封装 WebRTC，实现屏幕共享与远程协作标注。通过 useScreenShare() 管理流状态、资源回收和错误降级，避免静默失败；通过 useRemoteControl() 基于 DataChannel 传输归一化坐标，结合 canvas 叠加层实现低延迟标注。涵盖浏览器兼容性处理、光标同步优化与冲突解决策略。
git checkout
#Vue 3 组合式 API + IndexedDB：打造可靠的离线数据缓存与同步队列
本文介绍如何利用 Vue 3 的组合式 API 封装 IndexedDB，实现离线数据缓存与同步队列。通过 idb 库简化 IndexedDB 的 Promise 化操作，创建泛型 composable，让组件轻松读写数据库。同时讲解如何结合 Service Worker 实现断网时数据落库、网络恢复后自动同步的完整离线流程，提升弱网环境下的用户体验。
git checkout
#用Vue 3组合式API封装Web Workers：将复杂计算与数据过滤卸到后台线程
本文介绍如何使用Vue 3的组合式API封装Web Workers，将复杂计算和数据过滤从主线程卸载到后台线程，避免UI卡顿。从零搭建可复用的useWorker composable，处理万级数据过滤与排序的实际场景，实现流畅的用户体验。
git checkout
#Vue 3组合式API高阶模式：用自定义Composable封装复杂业务状态与副作用管理
从 Vue 2 的 Options API 切换到 Vue 3 组合式 API，最大的体会是终于不用在组件里来回翻同一份逻辑了。本文以购物车模块为例，展示如何用自定义 Composable 封装状态、计算属性和副作用，实现逻辑复用与关注点分离。包括自动同步 localStorage、定时器清理等实战技巧，帮你告别混乱的代码组织方式。
git checkout