vue实时数据过滤应分层处理：全局过滤器仅用于静态格式化，响应式过滤用pinia getter，业务规则过滤在store action/mutation中完成，确保状态干净、视图高效。

Vue 全局状态本身不直接处理实时数据推送，但结合过滤器（Filters）或计算属性（Computed）、Pinia/Vuex 状态管理，可构建清晰、可维护的实时数据过滤策略。关键在于：过滤逻辑应与状态更新解耦，避免在渲染层重复计算；实时数据进入状态后，再通过声明式方式“筛出”所需视图内容。

用全局过滤器做轻量级格式化

适用于时间、手机号、金额等无需响应式依赖的静态转换。例如 WebSocket 收到时间戳后，在模板中直接格式化：

• 在 globalFilter.js 中定义：
  const dateFormat = (ts, fmt = 'YYYY-MM-DD HH:mm:ss') => dayjs(ts).format(fmt)
• 全局注册后，任意组件内使用：
  {{ message.timestamp | dateFormat('MM/DD HH:mm') }}
• 注意：过滤器不监听依赖变化，适合纯函数式转换，不适合基于当前 state 动态决定是否显示的逻辑

用 computed 或 getter 做响应式过滤

当过滤条件依赖于用户操作、筛选开关或全局状态（如当前语言、权限等级）时，必须使用响应式机制：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 在 Pinia store 中定义 getter：
  filteredMessages: (state) => state.allMessages.filter(m => m.type === 'notice' && m.unread)
• 在组件中通过 computed(() => useMessageStore().filteredMessages) 使用
• 优势：自动追踪依赖，实时更新；支持复杂条件、排序、分页等组合逻辑

用 actions + mutations 控制推送入口

真正的“过滤策略”起点应在数据入仓环节，而非展示环节：

• WebSocket 回调中，不直接 $patch 所有消息，而是先判断类型/优先级/白名单：
  if (msg.channel === 'system' && isAllowed(msg.tag)) store.addMessage(msg)
• 在 mutation 或 store action 中完成业务规则过滤，保证 state 中只存“已授权、已归类、已去重”的干净数据
• 这样后续所有组件消费数据时，无需重复校验，提升性能和一致性

避免常见误区

不要把过滤器当作状态过滤工具，也不要让组件自己遍历整个消息列表做筛选：

• ❌ 在 v-for 中写 v-if="item.status === 'active'" 处理千条实时消息 → 渲染卡顿、无法复用
• ❌ 把敏感字段脱敏逻辑写在模板里（如 {{ msg.content | hidePhone }}）→ 脱敏规则分散、难审计
• ✅ 正确做法：脱敏在 store 的 setter 或 action 中统一处理；展示层只负责格式化（如日期、单位），不承担业务规则

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！