getter适合图表首屏提速，因其惰性求值特性可延迟执行耗时的数据转换、聚合等逻辑，仅在首次读取时计算并缓存结果，避免初始化阻塞主线程，显著提升lcp和tti。
直接用 getter 实现“延迟计算”，能让大规模数据图表在首次加载时跳过冗余处理，只在真正需要渲染或交互时才执行耗时的数据转换、聚合或格式化逻辑，从而显著缩短首屏时间。
为什么 getter 适合图表首屏提速
图表初始化常伴随大量数据预处理：比如将原始 CSV 转为时间序列、按维度分组聚合、生成坐标映射表、计算统计指标（最大值、中位数、离群点）等。这些操作若在组件挂载时同步执行，会阻塞主线程，拖慢 LCP 和 TTI。而 getter 天然具备惰性求值特性——属性被读取时才运行内部逻辑，且结果可缓存，正好匹配“首次渲染不需全量数据、用户缩放/悬停后才需细分”的使用模式。
用 getter 封装可缓存的计算逻辑
把重计算逻辑写进 getter，并配合内部缓存，避免重复执行：
- 定义一个私有字段（如 _chartDataCache）存储已计算结果
- getter 内部先检查缓存是否存在；不存在则执行耗时逻辑并赋值，再返回
- 若原始数据更新（如通过 props 或 store 变更），需手动清空对应缓存，触发下次重新计算
示例：
class ChartModel {<br> constructor(rawData) {<br> this.rawData = rawData;<br> this._seriesCache = null;<br> }<br><br> get series() {<br> if (this._seriesCache) return this._seriesCache;<br><br> // 这里执行耗时的分组+聚合（如 d3.rollup）<br> this._seriesCache = this._computeSeries(this.rawData);<br> return this._seriesCache;<br> }<br><br> invalidateSeries() {<br> this._seriesCache = null;<br> }<br>}
结合 Proxy 支持嵌套字段按需加载
当图表数据结构复杂（如多层级指标、动态维度切换），单层 getter 不够用。可用 Proxy 包裹数据对象，在 get 拦截器中对深层字段（如 chart.data.byRegion.North.totalSales）做懒加载：
- 首次访问 byRegion.North 时，才加载并缓存该区域的子数据
- 用 WeakMap 存储每个 target 的字段加载状态，防止内存泄漏
- 对未加载字段返回占位对象或 Promise，保持调用链不中断
规避常见陷阱
延迟计算不是万能的，需注意边界：
- 不要在 getter 中发起网络请求或 DOM 操作——它们是副作用，应抽离到独立方法
- 避免 getter 返回未定义或 null 导致图表渲染异常，建议设置默认结构（如空数组、0 值）
- JSON.stringify() 不会触发 getter，调试时需显式访问或加日志输出
- 若图表库依赖响应式系统（如 Vue 的 reactive），需确保 getter 返回值能被正确追踪，必要时用 computed 包裹
