es6 getter 可实现实时、响应式的电商优惠价格计算，通过分层 getter（如 discountedprice、coupondeduction）组合逻辑，配合 reactive 机制自动更新，需规避副作用、浮点误差及非响应式依赖。
在电商系统中，商品的优惠后价格往往依赖多个动态因素（如原价、折扣率、满减活动、会员等级、库存状态等），用 ES6 的 getter 实现实时计算，既能保持数据响应性，又避免冗余更新逻辑。
用 getter 封装价格计算逻辑
将优惠后价格定义为只读属性，每次访问时重新计算，确保结果始终反映最新状态。不缓存中间值，也不手动触发更新——只要依赖的数据变化，下次取值就自动生效。
- 把影响价格的关键字段（如
originalPrice、discountRate、isOnSale、userLevel）设为实例属性 - 在
get finalPrice()中编写业务规则，比如：普通用户打 9 折，VIP 用户再减 5 元，且满 200 减 20 - 避免在 getter 中执行异步操作或副作用（如发请求、改 DOM），它应是纯函数式计算
支持多级优惠叠加的 getter 设计
真实场景中优惠常嵌套（如平台券 + 店铺券 + 限时折扣），可通过分层 getter 提升可读性和复用性：
- 定义
get discountedPrice()：仅处理基础折扣（如this.originalPrice * this.discountRate） - 定义
get couponDeduction()：根据用户可用券和门槛动态返回减免额 - 主
get finalPrice()组合二者：Math.max(0, this.discountedPrice - this.couponDeduction) - 这样修改某类优惠规则时，只需调整对应 getter，不影响其他逻辑
结合 reactive 状态实现响应式联动
单独使用 getter 不会自动监听依赖变化，需配合响应式机制（如 Vue 的 ref/reactive，或手动用 Object.defineProperty 包装）。例如：
- 若商品实例基于
class Product创建，且其属性来自reactive对象，则 getter 访问时能触发依赖收集 - 在 Vue 3 Composition API 中，可将商品对象放入
ref，模板里直接写{{ product.finalPrice }}，价格随product.discountRate或product.coupons变化自动更新 - 注意：原始 JS 类实例默认非响应式，需借助框架能力或 Proxy 封装才能实现“自动重算”
规避常见陷阱
getter 看似简单，但电商价格逻辑复杂，容易踩坑：
- 不要在 getter 内调用可能改变状态的方法（如
this.updateLog()），否则每次读取都触发副作用 - 避免浮点数精度问题：价格统一用“分”为单位存储整数，计算后除以 100 显示，防止
0.1 + 0.2 !== 0.3 - 当优惠依赖外部数据（如实时库存、活动开关），需确保这些数据也被纳入响应式系统，否则 getter 不会重新求值
- 性能敏感场景下，可加简单缓存（如用私有
_cachedFinalPrice和时间戳判断是否过期），但需明确失效条件
