Vue 3 中需将 WebSocket 数据存入 ref 或 reactive 响应式变量再用 watch 监听，配合 immediate、deep、节流等策略实现图表高效更新。
Vue 3 中不能直接用 watch 监听 WebSocket 连接本身，因为 WebSocket 实例不是响应式数据。但你可以用 watch 监听它推送后存入的响应式状态（比如 ref 或 reactive 对象），从而触发图表更新——这是实际开发中最常用、最可控的方式。
把 WebSocket 数据存进响应式变量再监听
WebSocket 收到消息后，应立即将解析后的数据赋值给一个 ref 或 reactive 变量。只有这样，watch 才能捕获变化并驱动图表重绘。
- 推荐使用
ref存储单个数据源（如最新车速、当前在线数） - 若需管理多个字段（如温度、湿度、时间戳），用
reactive更清晰 - 避免在
onmessage中直接调用chart.setOption()，应统一走响应式更新逻辑
监听 ref 数据并同步更新 ECharts 图表
假设你用 vue-echarts 渲染折线图，且后端每 2 秒推送一次新点：
蓝湖代码转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.
- 定义
const chartData = ref([])存储历史数据点数组 - WebSocket 收到新数据后：
chartData.value = [...chartData.value.slice(-9), newItem] - 用
watch监听chartData，并在回调中调用chartInstance.setOption({ series: [...] }) - 加
{ immediate: true }可在组件挂载时初始化图表，避免首次无渲染
监听 reactive 对象的深层变化（适合多指标场景）
当一个面板同时展示车流总量、平均速度、异常事件数等字段时，更适合用 reactive 统一管理：
立即学习“前端免费学习笔记（深入）”；
- 定义
const stats = reactive({ total: 0, avgSpeed: 0, alerts: [] }) - WebSocket 解析后直接赋值：
stats.total = data.total; stats.avgSpeed = data.speed - 用
watch监听整个对象：watch(() => stats, () => updateChart(), { deep: true }) -
deep: true确保嵌套属性变更也能触发，但注意性能——仅在必要时开启
配合防抖或节流避免高频重绘
若 WebSocket 推送频率很高（如每 100ms 一条），图表频繁重绘会导致卡顿。可在 watch 回调中加入节流：
- 用
lodash.throttle包装更新函数，例如throttle(updateChart, 300) - 或用
setTimeout延迟合并：收到新数据先缓存，500ms 内只执行最后一次更新 - 对实时性要求不高的图表（如日统计趋势），可改用定时聚合，而非逐条响应
