Vue 组件缓存如何解决图表组件在缓存切换时容器宽度自适应失效问题

Vue中keep-alive缓存ECharts图表时宽高异常，本质是实例挂载在尺寸未就绪的DOM上；解决关键是activated钩子调resize、v-if控制渲染、ResizeObserver精准监听或启用vue-echarts的autoresize。

Vue 组件用 keep-alive 缓存后，ECharts 图表在 Tab 切换回来时宽高异常（比如显示为空白、宽度固定为 100px、resize 不触发），本质是图表实例仍挂载在已脱离文档流或尺寸未就绪的 DOM 上，而 resize 监听逻辑没同步更新上下文。解决关键不是“重绘”，而是“确保 resize 调用发生在正确时机、作用于正确实例、依据正确尺寸”。

监听激活/失活生命周期，手动触发 resize

keep-alive 组件不会走 mounted/destroyed，但会触发 activated 和 deactivated。切回页面时，DOM 已恢复可见且尺寸可读，此时调用 chart.resize() 最稳妥。

1. 在 activated 钩子中检查 chart 实例是否存在，存在则立即执行 resize()
2. 避免在 deactivated 中销毁 chart（除非明确需要释放资源），保留实例即可
3. 配合 nextTick 确保 DOM 渲染完成后再获取尺寸，例如：

   this.$nextTick(() => this.chart?.resize())

用 ref + v-if 控制图表渲染时机

比起 v-show 或 display: none，v-if 能真正卸载/重建组件，让 ECharts 在每次显示时都重新初始化，天然规避尺寸残留问题。

1. Tab 切换时，只让当前活跃 tab 的图表组件 v-if="activeTab === 'chart1'"
2. 每个图表有自己的独立 ref 和生命周期，互不干扰
3. 如果担心性能，可配合 keep-alive 包裹整个 Tab 内容区域，而非单个图表组件

弃用 window.resize 全局监听，改用 ResizeObserver

全局 window.resize 容易被缓存组件干扰（如监听器还在跑，但目标 DOM 尺寸为 0），而 ResizeObserver 只观察特定容器，精准响应自身变化。

1. 在 mounted 中创建 observer，监听图表容器元素：

   const ro = new ResizeObserver(() => this.chart?.resize())

2. 在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中调用 ro.disconnect()
3. 无需手动清理事件监听器，也不依赖窗口缩放，Flex/Grid 布局变化也能捕获

启用 vue-echarts 的 autoresize 并合理配置

如果你用的是 vue-echarts（v6+），它原生支持 autoresize 属性，比手写监听更可靠。

1. 模板中直接加：<v-chart :autoresize="{ throttle: 160 }" :option="option" />
2. throttle 防抖值建议设为 100–200ms，兼顾响应性和性能
3. 确保图表容器本身 CSS 宽高有效（如 width: 100%; height: 400px; 或使用 flex 布局撑满）