用 watchEffect 实现在线人数统计的核心是让响应式数据与 Socket 状态联动：通过 ref 管理 onlineCount，Socket 仅更新其值，watchEffect 自动响应变化并执行 UI 更新或副作用，连接管理与响应式逻辑解耦，避免手动清理和重复订阅。
用 watchEffect 实现在线人数统计，核心不是“监听某个值”，而是“让响应式数据与 Socket 状态联动”——人数变化由后端推送驱动，前端用 watchEffect 自动追踪并触发 UI 更新或副作用（如发请求、写日志），同时避免手动清理和重复订阅。
1. 响应式在线人数状态需独立于 Socket 实例
不要把 onlineCount 直接挂在 socket 对象上。应使用 ref 或 reactive 管理：
- 定义
const onlineCount = ref(0)作为唯一数据源 - Socket 连接建立后，在
onmessage或事件回调中只做onlineCount.value = data.count - 这样
watchEffect才能真正响应变化，而不是监听一个普通变量
2. watchEffect 用于自动同步与副作用处理
watchEffect 在这里不负责接收消息，而是响应 onlineCount 变化后执行 UI 更新或轻量逻辑：
- 直接更新 DOM 文本：
document.getElementById('count').textContent = onlineCount.value - 触发动画（如数字跳变）：
animateCountChange(prev, onlineCount.value) - 按需上报埋点：
if (onlineCount.value > 1000) logEvent('crowd_alert') - 注意：不要在 watchEffect 里重新连接 socket 或重复绑定事件，那属于 setup 阶段逻辑
3. Socket 连接管理要与响应式解耦
连接、重连、断开监听应放在 onMounted 或独立的 composable 中，确保：
- 连接成功后才开始监听
onlineCount变化（避免初始值 0 触发误操作） - 断开时清空计数器或置为
-1（表示未知），watchEffect会自动响应 - 使用
onUnmounted关闭 socket，但无需手动停掉watchEffect—— 它随组件卸载自动停止
4. 处理竞态与中间态（如加载中、断连中）
真实场景中，人数不是瞬间更新的。建议扩展状态：
- 用
const status = ref('idle') - 在
watchEffect中组合判断：if (status.value === 'connected') { updateUI() } - 避免用户看到 “0 人” 的错误提示 —— 可配合
v-if="status === 'connected'"控制显示
关键不在 watchEffect 多强大，而在于把“谁负责接收”和“谁负责响应”分清楚：Socket 负责把数据喂进响应式变量，watchEffect 负责拿到就干活。这样既保持响应式流清晰，又不增加额外的事件总线或全局状态。
