关键在于将传感器数据转为响应式变量再由watch监听更新图表：用ref存数值或数组，reactive存对象；高频数据需节流或阈值比对；WebSocket等场景需在回调中赋值响应式变量并deep监听。
直接监听传感器数据并触发图表更新，关键不是“怎么写 watch”，而是“怎么让传感器数据变成响应式、且变化能被准确捕获”。Vue 3 的 watch 本身不负责获取传感器数据，它只负责响应式数据一变就执行逻辑（比如重绘图表）。所以整条链路是：传感器读取 → 转为响应式变量 → watch 捕获变化 → 调用图表更新方法。
确保传感器数据是响应式的
传感器原始值（如来自 Web API、WebSocket 或定时轮询）必须赋给 ref 或 reactive 才能被 watch 监听：
- 用
ref存单个数值（如温度）：const temperature = ref(0) - 用
ref存数组（如加速度三轴）：const accelerometer = ref([0, 0, 0]) - 用
reactive存结构化对象（如完整传感器包）：const sensorData = reactive({ temp: 25.3, humidity: 60, timestamp: Date.now() })
监听方式选对才不丢数据
传感器数据常高频、小幅度变动，不同场景对应不同监听写法：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 监听单个数值（如温度）：直接传 ref，无需 deep
watch(temperature, (newVal) => chart.update([newVal])) - 监听数组（如陀螺仪 xyz）：浅监听即可（数组引用不变时 push 不触发），建议用 getter 函数 + deep
watch(() => accelerometer.value, (newVal) => chart.update(newVal), { deep: true }) - 监听整个传感器对象：必须加
{ deep: true }，否则内部属性变不触发watch(sensorData, (newVal) => chart.render(newVal), { deep: true })
避免图表频繁重绘的实用技巧
传感器可能每 10ms 发一次数据，但图表没必要每帧都刷新。推荐加节流或比对：
立即学习“前端免费学习笔记（深入）”；
- 用
immediate: true确保初始化就画一次图watch(temperature, (newVal) => chart.addPoint(newVal), { immediate: true }) - 手动比对变化阈值（比如温度变化 ≥ 0.1℃ 再更新）
let lastTemp = 0; watch(temperature, (newVal) => { if (Math.abs(newVal - lastTemp) >= 0.1) { chart.update(newVal); lastTemp = newVal; } }) - 配合
watchEffect自动追踪多个依赖（如同时用温度和时间戳控制图表横轴）watchEffect(() => { chart.render(temperature.value, sensorData.timestamp) })
真实数据流示例（WebSocket 场景）
假设通过 WebSocket 接收传感器 JSON：
- 先定义响应式容器：
const latestReading = ref({ temp: 0, pressure: 0 }) - 在 onmessage 中更新：
ws.onmessage = e => { latestReading.value = JSON.parse(e.data) } - 监听并驱动图表：
watch(latestReading, (newVal) => myChart.series[0].addPoint([Date.now(), newVal.temp]), { deep: true })
