需用shallowref+readonly:shallowref避免对用户画像等嵌套大数据深度代理以降内存与gc压力,readonly防止误改确保队列状态安全可监听,再配合queuemicrotask实现满载自动排空。

用只读描述符(shallowRef + readonly)配合微任务调度,能安全、高效地实现大数据量流式埋点队列的满载自动排空。核心在于:既不让响应式系统为巨型对象开销失控,又确保队列状态可被可靠监听与触发。
为什么需要只读描述符
当埋点数据包含用户画像、设备快照、完整 DOM 路径等嵌套结构时,若用 ref 或 reactive 包裹整个队列或单条数据,Vue 会深度遍历并建立大量响应式代理,造成内存暴涨和 GC 压力。而 shallowRef 只对队列引用本身做响应式,内部元素保持原始状态;再用 readonly 封装,防止误写,兼顾性能与安全性。
满载检测与微任务调度
每次调用 track() 后立即检查队列长度:
- 若
trackQueue.length >= MAX_SIZE(如 50 条),立刻触发queueMicrotask(() => flushQueue()) - 不使用
setTimeout或直接同步执行,避免阻塞主线程或破坏事件循环顺序 - 微任务保证在当前宏任务结束前执行,兼顾及时性与非抢占性
排空逻辑需原子化处理
flushQueue() 内部应一次性完成打包、上报、清空三步,避免中间态被并发修改:
- 先深拷贝或序列化当前队列(尤其含函数、Date 等不可 JSON 直传类型时需预处理)
- 优先用
navigator.sendBeacon发送,保障页面卸载时仍能送达;失败降级为fetch(..., { method: 'POST' })并捕获 reject - 上报成功后,用
trackQueue.length = 0或trackQueue.splice(0)彻底清空——不能仅赋新数组,否则 shallowRef 引用丢失
结合静态分析提升健壮性
在鸿蒙或 Flutter 等支持注解生成的环境里,可将该队列机制下沉为 SDK 底层能力。例如 @Analytics 注解生成的埋点方法,自动走此队列通道;审计字典(Lookup Map)还能校验字段合法性,避免非法 payload 污染队列。这样既保留流式吞吐能力,又从源头控制数据质量。











