watchEffect 动态订阅 WebSocket 的核心是让订阅随响应式信号自动触发、清理与重试；通过监听登录态和页面可见性控制开关，将消息纳入响应式流，并利用 onInvalidate 自动清理连接，结合断线重连与幂等机制保障可靠性。
在 watchEffect 中动态订阅 WebSocket 消息，关键不是“手动发订阅请求”，而是让订阅行为随响应式信号自动触发、自动清理、自动重试。它本质是把「连接状态 + 用户意图 + 页面环境」变成可响应的条件，由 Vue 自动驱动整个生命周期。
监听登录态与页面可见性作为订阅开关
WebSocket 订阅通常只应在用户已登录且页面处于前台时进行。用 ref 封装这些状态，watchEffect 会自动追踪：
-
定义信号：如
isLoggedIn = ref(false)、isPageVisible = ref(true)（配合document.visibilityState监听） - 在 watchEffect 内判断：只有当两者都为 true 时才执行连接与订阅逻辑；任一为 false，就执行退订 + 关闭
-
避免重复订阅：在发送
{"type":"subscribe","channel":"notify"}前，检查ws?.readyState === WebSocket.OPEN
把消息接收和状态更新纳入响应式流
收到通知不能只做 console.log，要让它真正驱动视图：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
用 ref 存储通知列表：如
notifications = ref([])，在ws.onmessage中执行notifications.value.push(data) -
不要直接操作原生 ws 对象本身：它不是响应式数据，但它的
readyState、错误标志、是否已订阅等状态可以封装成 ref 被追踪 -
组件内直接使用 notifications：模板中
{{ n.content }}会自动响应新增
用 onInvalidate 处理自动清理
watchEffect 的清理时机非常可靠——依赖失效或组件卸载时都会触发：
立即学习“前端免费学习笔记（深入）”；
-
在回调开头声明 ws 实例：用
const ws = ref(null)存储，便于后续关闭 -
订阅前先清理旧连接：在
onInvalidate中写ws.value?.close(); ws.value = null; -
事件监听器无需手动解绑：因为
ws.value被置为 null 后，其 onmessage/onerror 等回调自然失去上下文；若用了闭包持有组件变量，需确保不造成内存泄漏
支持断线重连与幂等订阅
真实网络环境下，连接中断是常态，watchEffect 本身不重试，但你可以主动设计容错：
-
监听连接状态变化：在
ws.onerror和ws.onclose中设置connected.value = false，触发watchEffect重新评估条件，若仍满足就重连 -
加延迟与次数限制：用
retryCount = ref(0)和setTimeout控制重试节奏，防止雪崩 -
服务端配合去重：前端订阅时带上唯一
client_id，服务端识别重复订阅直接忽略，保证多次触发也安全
