Vue 中 WebSocket 消息需解析后写入 ref/reactive 响应式变量，避免直接替换对象；按全量/增量/事件类型更新状态，注意新增属性、数组索引赋值等响应失效场景，并用 Pinia 或 provide/inject 共享状态，配合 watch/computed 实现联动响应。
Vue 数据监听实现 WebSocket 实时消息接收后的状态更新，核心在于把接收到的原始消息正确解析，并同步到响应式数据中——不是简单赋值，而是确保 Vue 能检测到变化并触发视图更新。
用 ref 或 reactive 管理可响应的数据源
WebSocket 收到的消息（如 JSON 字符串）需要被解析后写入响应式变量。若使用 ref，需通过 .value 赋值；若用 reactive，直接修改属性即可触发更新。
- 推荐在
setup()中定义：const messageList = ref([])或const data = reactive({ count: 0, status: 'idle' }) - 在
ws.onmessage回调里解析消息：const payload = JSON.parse(event.data)，再更新响应式变量 - 避免直接替换整个对象（如
data = newObject），这会丢失响应性；应逐字段赋值或用Object.assign(data, newObject)
消息结构决定更新粒度
后端推送的消息格式直接影响你如何更新状态。常见有三种类型：
-
全量更新：消息含完整数据快照（如
{ users: [...], total: 12 }），适合直接覆盖本地状态 -
增量更新：含操作类型和变更项（如
{ type: 'add', item: { id: 5, name: 'Alice' } }），需手动 merge 到现有数组或对象 -
事件驱动：只发事件名（如
"user:online"）+ 附加数据，需在对应 handler 中执行业务逻辑（如onlineUsers.push(userId)）
避免响应式失效的几个关键点
即使用了 ref/reactive，以下情况仍会导致视图不更新：
立即学习“前端免费学习笔记（深入）”；
- 对响应式对象新增顶层属性（
data.newField = 'xxx'）——需用Vue.set(data, 'newField', 'xxx')（Vue2）或defineProperty+reactive（Vue3） - 用索引直接修改数组（
list[0] = newItem）——改用list.splice(0, 1, newItem)或list = [...list] - 消息解析出错（如 JSON 格式非法）导致赋值失败，建议加 try-catch 并打印 error
- 跨组件共享状态未统一管理，导致 A 组件更新了，B 组件还是旧数据 —— 推荐用 Pinia 或 provide/inject 做集中状态托管
配合 watch 或 computed 做联动响应
当消息触发的状态变化需要进一步计算或副作用时，可搭配 Vue 的响应式 API：
- 用
watch监听某个响应式字段变化，执行图表刷新、日志上报等操作 - 用
computed派生新状态（如filteredUsers = computed(() => users.value.filter(u => u.active))），自动随源数据更新 - 若需异步处理（如保存到 localStorage），注意在
watch中使用flush: 'post'避免与 DOM 渲染冲突
