用 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），直接改它的属性不会触发更新：
- ❌ 错误：
const userInfo = ref({ name: 'Alice' }); userInfo.value.name = 'Bob';（视图不更新） - ✅ 正确：
userInfo.value = { ...userInfo.value, name: 'Bob' };或userInfo.value = { name: 'Bob', avatar: '...' };
更稳妥的做法是：对复杂状态统一用 reactive，或始终用完整替换代替局部修改。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章