搞电商页面的规格选择器，很多人一上来就写一堆事件监听、手动维护状态，结果代码越来越乱。其实核心思想很简单：把规格联动的逻辑交给计算属性（computed），让数据流自己跑起来。怎么做？先设计好数据结构，再围绕两个核心响应式字段——`selectedSpecs`和`skus`——用computed去推
搞电商页面的规格选择器，很多人一上来就写一堆事件监听、手动维护状态，结果代码越来越乱。其实核心思想很简单：把规格联动的逻辑交给计算属性（computed），让数据流自己跑起来。怎么做？先设计好数据结构，再围绕两个核心响应式字段——`selectedSpecs`和`skus`——用computed去推导“哪些规格值还能选”、“当前SKU是什么”、“库存够不够”以及“按钮该显示什么”。这样逻辑清晰、可维护，还不容易出bug。
计算属性不是用来“算数”的，而是帮你把规格选择的联动逻辑变得清晰、可维护、不重复。
### 规格数据结构怎么设计才利于计算？
别直接用扁平数组存所有 SKU，先分层：规格项（如“颜色”“尺码”）→ 规格值（如“红色”“L”）→ SKU（含库存、价格、id）。关键是在 Vue 实例中维护两个核心响应式字段：
- **selectedSpecs**：对象，记录当前选中的规格键值对，例如 `{ color: '红色', size: 'L' }`
- **skus**：数组，每个元素是完整 SKU 对象，含 `specs`（规格映射）、`stock`、`price` 等
这样后续所有计算都基于这两个稳定输入，不依赖 DOM 状态或临时变量。
### 用 computed 拆解“哪些规格值还能点？”
用户点了颜色后，尺码列表要实时过滤出有货的组合——这不是靠事件手动更新，而是靠一个计算属性动态推导：
```ja vascript
a vailableSizes() {
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();
}
```
同理可写 `a vailableColors()`、`a vailableVersions()`，它们彼此独立又自动响应依赖变化，无需手动触发同步。
### 如何判断当前组合是否有效并获取对应 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 封装，页面就既健壮又容易调试。
