shallowref 适合音频波形图因其避免对数十万采样点逐个代理，仅在整体替换时触发更新；配合 triggerref 可手动控制局部修改的刷新，markraw 则防止第三方波形数据被意外劫持。
shallowRef 对音频波形图这类高频、高密度数据的渲染优化效果非常直接——它避免对成千上万个采样点做无意义的响应式代理，把 Vue 的响应式开销从“逐点追踪”降到“整体替换感知”。
为什么波形数据不适合用 ref 或 reactive
一段 5 秒、44.1kHz 的音频，原始波形数组就含约 22 万数值点。若用 ref(points)，Vue 会为每个数字创建 Proxy 追踪器；更糟的是，某些波形可视化库（如 wavesurfer.js）内部已自行管理状态，再套一层响应式反而干扰其更新逻辑，甚至引发重复渲染或内存泄漏。
用 shallowRef 管理波形数据的正确姿势
- 声明时只包裹顶层引用：const waveform = shallowRef(new Float32Array(220500))，不递归代理内部数值
- 整段替换才触发视图更新：比如加载新音频后 waveform.value = newWaveData ✅，此时组件重绘一次
- 局部修改不自动更新：waveform.value[1000] = 0.8 ❌（数据变了，但界面不动）——这反而是优势，避免每改一个点都触发 patch
-
需要局部更新并刷新？用 triggerRef：比如实时绘制录音过程中的新片段，先批量写入 buffer，再调用
triggerRef(waveform)✅，一次通知，干净高效
配合 markRaw 防止意外代理
如果波形数据来自第三方库（如 wavesurfer 的 getWaveform() 返回对象），建议先用 markRaw() 标记不可响应，再交由 shallowRef 管理：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const waveform = shallowRef(rawWave)
这样既保留原始数据结构完整性，又杜绝 Vue 深层劫持带来的性能损耗和潜在冲突。
与渲染逻辑协同：避免在 render 中计算
波形图常需缩放、截取、降采样等处理。这些操作绝不要放在 render() 函数或模板中动态执行。应在 setup 里用 computed 或 watchEffect 预处理，并确保 computed 依赖的是 waveform.value 而非 waveform 本身——这样只有 waveform.value 被整体替换时，计算才重新执行，而不是每次读取都触发依赖收集。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
