如何利用计算属性实现电商页面的规格选择器：复杂逻辑拆解教程

计算属性用于清晰维护规格联动逻辑，核心是分层设计规格数据结构并基于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 封装，页面就既健壮又容易调试。