如何利用 watchEffect 实现在线人数实时统计？Socket 与响应式结合

张开发
• 2026/4/19 3:38:35 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何利用 watchEffect 实现在线人数实时统计？Socket 与响应式结合
用 watchEffect 实现在线人数统计的核心是让响应式数据与 Socket 状态联动通过 ref 管理 onlineCountSocket 仅更新其值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 中确保 ARTi.PiCS ARTi.PiCS是一款由AI驱动的虚拟头像生产器可以生成200多个不同风格的酷炫虚拟头像

更多文章