vue2中beforedestroy/destroyed调用ws.close()失效，主因是websocket实例被复用、已提前关闭或插件未按规范关闭；正确做法是绑定组件生命周期、检查readystate、配对调用close()与destroy()，并推荐单例管理器模式。
vue2 里 beforedestroy 或 destroyed 调用 ws.close() 失效，不是你代码写错了，而是连接对象可能已被回收、或被多个组件共享导致引用丢失 —— 必须确保关闭的是当前实例持有的那个 websocket 对象。
为什么 beforeDestroy 里 ws.close() 经常没反应
常见现象是：路由切换后 DevTools 的 Network → WS 标签里连接仍显示“Open”，onclose 也不触发。根本原因有三个：
-
ws实例在组件 data 中声明，但被其他地方（比如全局工具类、mixin、父组件）复用或覆盖，this.ws已不是真实连接对象 - 组件销毁时
ws已因网络异常提前触发onclose，再次调用close()是无效操作（WebSocket 规范规定：对已关闭连接重复调用无副作用） - 使用了第三方封装（如
vue-native-websocket），但未按其约定方式关闭（例如要调用this.$socket.close()+this.$socket.destroy()，只调一个不行）
正确关闭的实操要点（原生 WebSocket）
不依赖插件时，必须把连接生命周期和组件强绑定，并加防护判断：
- 在
data中初始化ws: null，且只在mounted或created中赋值，避免多次 new - 关闭前检查状态：
if (this.ws && this.ws.readyState === WebSocket.OPEN) { this.ws.close(); } - 务必在
beforeDestroy和destroyed都写一遍关闭逻辑（某些 Vue2 版本中beforeDestroy可能不执行） - 手动清除事件监听器（尤其当用了闭包函数注册
onmessage），防止内存泄漏：this.ws.onmessage = null;
用 vue-native-websocket 插件时怎么关
这个插件把连接挂到 this.$socket 上，但它的 close() 只发关闭帧，不清理内部状态 —— 必须配对调用：
-
this.$socket.close()：发送 FIN 帧，断开 TCP 连接 -
this.$socket.destroy()：移除所有事件监听、清空内部缓存、重置状态 - 两者缺一不可，顺序无所谓，但建议都放在
beforeDestroy - 如果项目用了
connectmanually: true，记得初始化时主动调this.$socket.connect()，否则close()会静默失败
更稳妥的方案：抽离成单例管理器 + 显式注销
多人协作或复杂页面中，靠组件钩子关连接风险太高。推荐用单例服务 + 订阅注销模式：
- 在
utils/websocket.js中导出一个WSManager类，内部用Map存储各业务模块的回调函数 - 组件
mounted时调WSManager.subscribe('alarm', handler)，beforeDestroy时调WSManager.unsubscribe('alarm') - 管理器内部只在所有订阅都被取消、且连接空闲超时后才真正
close()，避免频繁启停 - 这样即使组件销毁失败，连接也不会“悬空”，后续新组件还能复用
最易被忽略的一点：WebSocket 关闭不是“发个指令就完事”，它依赖 TCP 层的四次挥手完成。如果服务端没响应 Close frame，浏览器可能卡在 CLOSING 状态长达数秒 —— 所以检查是否关闭成功，不能只看 JS 是否执行了 close()，得盯住 Network 面板里的 WS 连接状态变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
