只读描述符本身不实现“满载排空”，而是通过语义约束保障队列引用不可篡改，配合微任务调度与显式队列控制器（含阈值判断、queuemicrotask、flushqueue及防重入锁）达成安全可控的批量上报。
用只读描述符实现大数据量微任务埋点队列的“自动化满载排空”，本质上不是靠 readonly 本身来“排空”，而是借助其语义约束 + 微任务调度机制 + 显式队列管理，达成**安全、可控、不被意外中断**的批量上报。关键在于：只读描述符保障队列引用不可篡改，而“满载排空”由外部逻辑驱动，微任务确保非阻塞、高优先级执行。
只读描述符的作用边界要清楚
Vue 的 readonly（或 JavaScript 原生 Object.freeze / const 引用）仅保护“引用不可变”和“属性不可写”，它不阻止你调用队列方法，也不影响 push、shift、splice 等操作——只要队列实例本身是可变对象。所以：
-
✅ 正确用法：把埋点数据队列（如
trackQueue = []）用readonly(trackQueue)包裹，目的是防止业务代码误赋值（如trackQueue = new Array()）或删除关键属性； -
❌ 错误期待：以为加了
readonly就能自动触发清空、或让队列变成“只进不出”。它不提供任何调度、触发或生命周期能力。
“满载排空”的核心逻辑在队列控制器里
所谓“满载”，指队列长度达到预设阈值（如 50 条）；“排空”指将当前全部数据异步批量上报，并清空队列。这部分必须由独立的控制器实现，且推荐放在微任务中执行以避免阻塞渲染：
- 每次
track()调用后，检查trackQueue.length >= MAX_SIZE； - 满足条件时，立即用
queueMicrotask(() => flushQueue())调度排空； -
flushQueue()内部执行：打包数据 → 调用navigator.sendBeacon或fetch(..., { method: 'POST' })→ 清空原队列（trackQueue.length = 0或trackQueue.splice(0)）。
结合 shallowRef + readonly 提升大数据场景稳定性
当埋点数据本身是大型嵌套对象（如含用户画像、设备快照、完整 DOM 路径），直接响应式监听开销大。此时可组合使用：
- 用
shallowRef存储队列数组（避免深层响应式代理）； - 用
readonly包裹该shallowRef.value，对外暴露只读视图； - 内部仍通过
shallowRef.value.push(item)追加，保证性能； - 上报前对每条数据做轻量序列化（如
JSON.stringify(item)），规避循环引用问题。
防重入与状态同步不能少
高频埋点下，可能连续触发多次“满载”，若不控制，会并发执行多个 flushQueue，导致重复上报或清空错乱。需加简单状态锁：
- 声明
let isFlushing = false； - 在
queueMicrotask回调开头判断if (isFlushing) return，并设为true； - 上报成功后置
isFlushing = false，允许下次触发。
