vue 与 websocket 结合需确保连接稳定、消息准确、状态清晰、更新及时：须封装连接逻辑防泄漏，立即绑定 onmessage 防丢首帧，send 前校验 readystate，重连采用指数退避+消息队列+服务端断点续传，实例应按需独立创建或用引用计数共享。
Vue 与 WebSocket 结合处理实时数据，关键不在“连上就行”，而在于连接稳、消息准、状态清、更新快。直接在组件里 new WebSocket() 容易引发重复连接、内存泄漏、onmessage 绑定过晚收不到首条消息等问题，尤其在 Vue3 的组合式 API 场景下，必须用封装逻辑来兜住生命周期和异常边界。
消息接收要防类型错、时机错、解析错
后端发来的 event.data 不一定是字符串——可能是 ArrayBuffer 或 Blob，尤其在传输二进制数据（如压缩 JSON、Protobuf）时，直接 JSON.parse(event.data) 会报错。同时，服务端常在连接建立后立刻推送认证响应（如 {"status":"ok","token":"xxx"}），若前端只监听业务消息类型，就会漏掉握手关键帧。更隐蔽的是绑定时机：如果 onmessage 只在 onopen 回调里才注册，而服务端 TCP 连接一通就发了数据，这部分消息就永远丢失了。建议在 new WebSocket() 后立即绑定 onmessage，再统一按 type 字段分发处理。
发送前必须校验 readyState
WebSocket 的 readyState 是动态的，不是布尔开关。不能只靠一个 isConnected ref 判断能否发消息，它只是某个时刻的快照。真正安全的做法是每次 send 前检查：if (ws?.readyState === WebSocket.OPEN)。否则在 CONNECTING（0）、CLOSING（2）或 CLOSED（3）状态下调用 send，要么抛 InvalidStateError，要么静默失败，消息彻底丢失。网络抖动时 readyState 可能突变为 CLOSING，但 onclose 回调尚未触发——此时仅靠状态变量守门，根本拦不住无效发送。
断线重连得带退避 + 队列 + 断点
- 重连不能简单 setTimeout(connect, 3000)，应采用指数退避：首次 1s，失败后 2s、4s、8s……上限建议 30s，避免雪崩式重连请求
- 重连期间用户新发的消息不能丢，要暂存 pendingMessages 队列，等 onopen 触发后再批量 send
- 防止重复收老消息，光靠前端重连不够——需服务端支持游标（如 last_message_id）或时间戳断点续传；客户端重连时在 URL 中带上参数，例如
wss://host/ws?from_id=12345
连接实例不能跨组件共享
每个 useWebSocket 调用都应创建独立 WebSocket 实例。导出 const ws = new WebSocket() 这种全局单例写法极其危险：A 组件调用 close() 会直接中断 B 组件的通信。如确需共享连接（比如多个图表共用同一数据源），必须用引用计数机制管理生命周期，而不是简单复用实例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
