shallowRef适用于图表库因只代理.value本身，避免对ECharts等复杂实例深度Proxy劫持，防止主线程卡顿、内存暴涨及原型链破坏。
shallowRef 能显著提升图表库在大数据场景下的渲染性能，核心在于绕过 Vue 对复杂实例的深度代理，避免主线程卡顿和内存暴涨。
为什么图表库特别适合 shallowRef
像 ECharts、Chart.js、Three.js 这类库的实例内部结构极其复杂：包含大量闭包、私有属性、原型链绑定和循环引用。如果用 ref 或 reactive 包裹它们，Vue 会尝试递归劫持所有嵌套字段——这不仅毫无必要，还会：
- 初始化时卡住主线程 1–2 秒（实测 10 万点数据 + ECharts 实例）
- 堆内存瞬间增长几百 MB
- 破坏第三方库内部状态，引发 TypeError: Cannot read private member 等崩溃
正确声明与初始化方式
把图表实例本身作为浅层响应式值，只监听“整体替换”动作：
import { shallowRef, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
<p>const chart = shallowRef(null)
const chartDom = ref(null)</p><p>onMounted(() => {
if (chartDom.value) {
chart.value = echarts.init(chartDom.value, null, { renderer: 'canvas' })
// 此时 chart.value 是原始 ECharts 实例，未被 Proxy 深度包裹
}
})</p><p>onUnmounted(() => {
chart.value?.dispose()
})
更新图表的两种可靠路径
图表数据或配置变化时，不直接改内部属性，而是走可控更新流：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
整体重绘（推荐）：修改 option 后调用
setOption，再整体赋值触发视图更新chart.value.setOption(newOption)<br>chart.value = chart.value // 触发响应式更新
-
局部修改 + 手动触发：仅在必须复用实例且需细粒度控制时使用
chart.value?.getZr()?.refresh() // 原生刷新<br>triggerRef(chart) // 强制通知 Vue 更新
配合其他优化更进一步
单用 shallowRef 已有明显收益，叠加以下做法可逼近最优性能：
- 用 markRaw 包裹静态配置项（如 theme、tooltip 样式），彻底跳过响应式系统
- 大数据 series 数据源用 shallowRef 存储原始数组，配合
setData或setOption({ series })替换，避免逐项响应追踪 - 对图表容器加 v-memo，确保 DOM 结构稳定时不重复 patch：
<div v-memo="[chartId]" :ref="chartDom"></div>
不复杂但容易忽略：关键不是“能不能用”，而是“别让 Vue 去管本该由图表库自己管的事”。shallowRef 就是那个恰到好处的边界开关。
