高频数据卡顿主因是响应式系统过度激活；用 shallowref 包裹数据可避免内部修改触发更新，再通过 triggerref 手动控制刷新时机，配合 raf 或节流实现高效批量更新。
高频数据更新卡顿，往往不是 Vue 渲染慢，而是响应式系统被“过度激活”了。ref 默认是深度响应式的，每次改内部字段都触发依赖追踪和更新派发——鼠标移动、滚动、传感器数据这类每秒几十上百次的更新，直接让 Vue 的 Proxy 拦截和 effect 重执行变成性能瓶颈。
用 shallowRef + triggerRef 精准控制更新时机
把高频变动的数据用 shallowRef 包裹，它只对 .value 整体赋值做响应式追踪，内部属性修改完全不触发更新。再配合 triggerRef，在真正需要视图刷新时手动“拍一下”通知依赖更新。
- 适合场景：鼠标位置、陀螺仪数据、实时日志流、Canvas 坐标等只读取、极少需同步渲染的高频数据
- 写法示例：const pos = shallowRef({ x: 0, y: 0 })；后续直接 pos.value.x = e.clientX 不会触发任何更新
- 需要刷新时调用 triggerRef(pos)，比如节流后或关键帧里统一触发
配合 requestAnimationFrame 或节流逻辑批量更新
高频数据本身不需要每帧都进 DOM，人眼也感知不到 60fps 以上的细微变化。与其让每次 set 都走一遍响应式流程，不如攒一批再统一处理。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章