计算属性用于清晰维护规格联动逻辑，核心是分层设计规格数据结构并基于selectedSpecs和skus两个响应式字段，用computed推导可用规格值、匹配SKU、库存状态及UI反馈。
计算属性不是用来“算数”的，而是帮你把规格选择的联动逻辑变得清晰、可维护、不重复。
规格数据结构怎么设计才利于计算？
别直接用扁平数组存所有 SKU，先分层：规格项（如“颜色”“尺码”）→ 规格值（如“红色”“L”）→ SKU（含库存、价格、id）。关键是在 Vue 实例中维护两个核心响应式字段：
-
selectedSpecs：对象，记录当前选中的规格键值对，例如
{ color: '红色', size: 'L' } -
skus：数组，每个元素是完整 SKU 对象，含
specs（规格映射）、stock、price等
这样后续所有计算都基于这两个稳定输入，不依赖 DOM 状态或临时变量。
用 computed 拆解“哪些规格值还能点？”
用户点了颜色后，尺码列表要实时过滤出有货的组合——这不是靠事件手动更新，而是靠一个计算属性动态推导：
availableSizes() {
const selectedColor = this.selectedSpecs.color;
// 找出所有包含该颜色且有库存的 SKU
const validSkus = this.skus.filter(sku =>
sku.specs.color === selectedColor && sku.stock > 0
);
// 提取这些 SKU 中出现过的尺码值，去重并排序
return [...new Set(validSkus.map(s => s.specs.size))].sort();
}
同理可写 availableColors()、availableVersions()，它们彼此独立又自动响应依赖变化，无需手动触发同步。
如何判断当前组合是否有效并获取对应 SKU？
用户点完全部规格，需要立刻知道有没有匹配的 SKU、是否可购买。这个判断也交给计算属性：
-
matchedSku：遍历
skus，找specs完全匹配selectedSpecs的项，返回第一个（或 null） -
isCompletelySelected：检查
selectedSpecs是否覆盖了所有规格维度（比如必须选完颜色+尺码+版本） -
isInStock：仅当
matchedSku存在且matchedSku.stock > 0时为 true
这三个计算属性天然形成判断链：选得全吗？→ 有对应 SKU 吗？→ 有库存吗？模板里直接绑定 v-if="isCompletelySelected && isInStock" 就行。
交互反馈和禁用状态也靠计算驱动
按钮文字、禁用态、提示文案都不用手动 if-else 切换：
-
buyButtonText：返回
isInStock ? '立即购买' : (matchedSku ? '缺货' : '请选择完整规格') -
isBuyButtonDisabled：返回
!isCompletelySelected || !isInStock -
hintMessage：根据
matchedSku和selectedSpecs动态生成，比如“红色 + L 有货，¥199”
所有 UI 状态都变成“数据的投影”，改逻辑只动计算属性，不碰事件回调或 DOM 操作。
不复杂但容易忽略：计算属性之间可以互相依赖，只要不形成循环引用。把规格联动看作“输入→过滤→匹配→反馈”的数据流，每一步都用一个 computed 封装，页面就既健壮又容易调试。
