用 ref 处理 WebSocket 推送数据需确保响应式更新：基础类型和浅层对象可直接赋值；嵌套对象须整体替换；数组更新需替换引用；复杂状态宜用 reactive 或 computed 衍生。
用 ref 处理 WebSocket 推送的数据，关键在于让响应式变量“真实承载变化”，而不是只做一次赋值。Vue 3 的 ref 本身是响应式的，但必须确保更新方式能触发依赖追踪——尤其是面对对象、数组或深层结构时。
直接赋值适用于简单值和浅层对象
如果后端推送的是基础类型（如字符串、数字）或扁平结构的 JSON（例如 { id: 'u1', status: 'online' }），可以直接赋值给 ref.value：
-
const userStatus = ref('offline')→ 收到'online'后写userStatus.value = 'online' -
const latestMessage = ref({})→ 收到新消息对象后写latestMessage.value = newData
这种写法简洁有效，模板中使用 {{ latestMessage.id }} 会自动响应更新。
嵌套对象需避免直接修改属性
如果 ref 包裹的是一个普通对象（非 reactive），直接改它的属性不会触发更新：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- ❌ 错误：
const userInfo = ref({ name: 'Alice' }); userInfo.value.name = 'Bob';（视图不更新） - ✅ 正确：
userInfo.value = { ...userInfo.value, name: 'Bob' };或userInfo.value = { name: 'Bob', avatar: '...' };
更稳妥的做法是：对复杂状态统一用 reactive，或始终用完整替换代替局部修改。
数组更新要保证响应式生效
向 ref 包裹的数组添加/删除元素时，不能用 push/splice 原地操作（除非该数组本身由 reactive 创建）：
- ❌
const messages = ref([]); messages.value.push(newMsg);（可能不触发更新） - ✅ 推荐：
messages.value = [...messages.value, newMsg];或messages.value = messages.value.concat(newMsg);
这样 Vue 能检测到 value 的引用变化，从而刷新依赖它的列表渲染。
配合 computed 提升可读性与复用性
不要把所有逻辑堆在 onmessage 回调里。可以将 ref 数据作为源，用 computed 衍生出过滤后、排序后或格式化后的状态：
- 例如：
const onlineUsers = ref([])接收在线列表，再定义const activeUsers = computed(() => onlineUsers.value.filter(u => u.status === 'active')) - 模板中直接用
v-for="u in activeUsers"，既解耦又响应及时
这样组件关注的是“状态结果”，而不是“怎么更新”。
