计算属性应通过最小粒度依赖、数据变更检测、记忆化函数、预聚合、增量更新、分级响应和外部缓存等策略优化性能。
计算属性本身不自动缓存，但结合响应式系统和合理设计，能显著降低高频刷新下的 CPU 压力。关键不是“让计算属性变快”，而是避免它在每次 tick 到来时都重新执行无意义的运算。
只在数据真实变化时触发重算
Vue 或类似框架中，计算属性依赖响应式数据。若原始行情数据（如盘口十档、逐笔）以对象或数组形式直接更新，哪怕只改一个价格，整个对象引用未变，计算属性可能不会更新；反之，若每次推送都新建对象，即使内容相同，也会强制重算。
- 确保行情数据更新使用浅层响应式优化：例如用 ref 包裹单个字段（如
bidPrice1），而非用 reactive 包裹整块盘口对象 - 对需聚合的指标（如“五档差额”“买卖力量比”），把输入拆成最小粒度依赖项，而不是依赖整个
orderBook对象 - 在接收行情时做简单 diff：仅当价格/量发生实际变动，才触发 Vue 的
triggerRef或更新对应 ref，跳过静默帧
用 memoization 封装纯计算逻辑
把真正耗 CPU 的公式（比如 MACD 多周期嵌套、自定义动量斜率）抽离为独立函数，并手动加一层记忆化。这样即使计算属性被多次调用，只要参数没变，就复用上次结果。
- 用闭包缓存最近一次输入与输出，例如：
const calcVolRatio = memo((bidVol, askVol) => bidVol / (bidVol + askVol)) - 避免在计算属性内部做循环遍历全量逐笔数据；改为在数据接入层预聚合（如每 100ms 合并一笔流为“区间成交统计”），再供计算属性消费
- 对时间序列类指标（如 N 日均值），用增量更新代替全量重算：收到新 tick 时，仅更新 sum 和 count，不重新遍历历史数组
分级响应：区分“视觉刷新”和“逻辑更新”
人眼无法识别高于 30fps 的画面变化，但策略可能需要毫秒级信号。不必让所有计算属性都随每笔行情刷新。
- 将指标分为两类：UI 层显示用的（如 K 线最新价、涨跌幅）设为低频更新（如 200ms 节流）；策略信号类（如突破标志位）保持即时响应
- 利用 watch 替代部分计算属性：对关键阈值（如价格破前高）用 watch 监听，满足条件才设置 signal ref，避免每帧都做比较
- 对非关键图表（如副图成交量柱状图），启用 canvas 离屏渲染 + requestIdleCallback 更新，不抢占主线程
配合外部缓存减少重复解析
如果计算属性要处理原始字符串行情（如 WebSocket 收到的 JSON），解析本身就有开销。这部分不该放在计算属性里反复做。
- 在 onMessage 回调中完成 JSON.parse + 字段提取 + 类型转换，生成标准化 JS 对象后，再赋值给响应式变量
- 对重复结构数据（如多只股票共用同一支标的行情模板），用 Map 缓存已解析的 symbol → data 映射，避免同一只股反复解析
- 若涉及历史数据回填（如补全分钟线），优先从 IndexedDB 读取已聚合的本地缓存，而非每次请求都走网络+计算
