watch 适合监听 WebSocket 状态更新 UI，但不可用于心跳与重连——心跳需独立定时器驱动，重连应封装为函数由 watch 触发；所有定时器和连接须在 onBeforeUnmount 中显式清理。
Vue.js 中的 watch 可以响应式监听 WebSocket 连接状态变化，但**不能单独依赖它来实现健壮的心跳与重连逻辑**——它适合做“状态同步”和“副作用触发”，而非连接管理本身。
用 watch 监听 connectionStatus 实现 UI 响应
把 WebSocket 实例的连接状态（如 readyState）封装为响应式数据，watch 就能及时更新按钮、提示文案或图标：
- 定义一个
connectionStatus数据（如'connecting' | 'open' | 'closed' | 'error'），在 WebSocket 回调中手动更新它 - 在
watch中监听该状态，执行 UI 更新或日志上报：watch(() => connectionStatus.value, (newVal) => {<br> console.log('连接状态变为：', newVal);<br> statusText.value = statusMap[newVal];<br>}); - 避免在 watch 内直接操作 WebSocket（如调用
ws.close()或new WebSocket()），易引发竞态或重复连接
心跳检测必须由独立定时器驱动，watch 不参与计时
心跳是主动发包行为，需稳定周期执行，watch 的触发时机不可控，也不保证连续性：
- 在 WebSocket 成功打开（
onopen）后，启动setInterval发送 ping 消息 - 监听
onmessage接收 pong 响应，重置本地“最后收到心跳”时间戳 - 另起一个定时器（如每 5 秒）检查时间戳，超时则判定断连并触发重连流程
- 所有定时器必须在连接关闭或组件卸载时
clearInterval，防止内存泄漏
重连逻辑应封装在独立函数中，watch 仅作触发入口
把重连策略（指数退避、最大重试次数、错误拦截）抽离成可复用方法，watch 只负责“感知到断开就调用它”：
- 监听
connectionStatus变为'closed'或'error'时，调用tryReconnect() -
tryReconnect内部控制延迟、计数、是否终止，并最终更新connectionStatus触发下一次 watch - 避免在 watch 回调里写重连细节（如 setTimeout 嵌套、状态判断），否则难以测试和维护
组合式 API 中推荐使用 onBeforeUnmount 清理资源
WebSocket 和心跳定时器属于外部副作用，需显式销毁：
- 用
onBeforeUnmount注册清理函数，清除所有setInterval和ws.onclose等引用 - 如果使用
watch监听了 props 或其他响应式源，也建议用其返回的停止函数统一注销 - 不要依赖 watch 自动“停掉”，它的取消只影响监听行为，不终止已启动的定时器或连接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
