应将 WebSocket 消息存入响应式 ref（如 latestMessage = ref(null)），再用 watch 监听该 ref 触发弹窗；需配合生命周期管理连接与监听，推荐使用 watchEffect 自动追踪多依赖。
直接用 watch 监听 WebSocket 消息本身是行不通的——因为原生 WebSocket 实例不是响应式对象，watch 无法追踪它的 onmessage 事件或内部状态变化。真正可行的做法是：把「收到的消息」这个结果封装成响应式数据（比如 ref 或 reactive），再用 watch 监听它。
把消息存进响应式 ref，再 watch 它
WebSocket 收到消息后，不要只做 console.log，而是把它推入一个响应式数组或赋值给一个 ref：
- 定义
const latestMessage = ref(null)或const notifications = ref([]) - 在
ws.onmessage回调里更新它：ws.onmessage = (e) => { latestMessage.value = JSON.parse(e.data); }; - 然后用
watch监听这个 ref，触发弹窗逻辑：watch(latestMessage, (msg) => { if (msg?.type === 'notify') showPopup(msg.content); });
监听多个消息字段，或带条件过滤
如果弹窗只对特定类型的通知生效（比如系统提醒、未读消息），可以在 watch 回调里加判断：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 监听整个通知列表：
watch(notifications, (list) => { const last = list.at(-1); if (last?.priority === 'high') triggerAlert(last); }) - 或者监听计算属性：
const shouldPopup = computed(() => notifications.value.some(n => n.urgent))，再 watchshouldPopup
配合组件生命周期，避免内存泄漏
弹窗逻辑必须和组件绑定，否则可能在组件卸载后还尝试调用 showPopup：
- 在
onMounted中建立 WebSocket 连接并注册onmessage - 在
onBeforeUnmount中关闭连接、清空 ref、取消 watch（如果用了watch返回的停止函数） - 不建议全局共享同一个
latestMessageref 来触发所有组件弹窗，容易错乱；推荐按业务域隔离（如用户通知、订单通知分开管理）
更推荐用 watchEffect 简化依赖管理
如果你的弹窗逻辑还依赖登录态、页面可见性等信号，watchEffect 更自然：
- 它自动追踪
latestMessage.value、user.isLoggedIn.value、document.visibilityState等 - 只要任一依赖变化，就会重新执行；条件不满足时还能自动清理（比如页面隐藏时暂停弹窗）
- 代码更简洁，不用手动写依赖数组，也避免遗漏响应式来源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
