Vue reactive 状态如何维护商品规格参数表格的动态行列数据

用 reactive 管理商品规格参数表格需将行列均设计为可响应式增删改的结构化对象，核心结构包括 attributes（属性列表）、skus（SKU 行数据）和 preview（笛卡尔积组合），支持动态增删属性/值、实时编辑与校验。

用 reactive 维护商品规格参数表格的动态行列数据，核心在于把“行”和“列”都当作可响应式增删改的结构化对象来管理，而不是硬编码固定字段。它适合处理规格组合爆炸（如颜色×尺寸×材质）、用户随时新增属性或值、以及需要实时联动校验的场景。

规格表格的数据结构设计

商品规格参数表本质是二维结构：横向是属性（如“颜色”“尺寸”），纵向是具体取值（如“红色”“XL”），而最终生成的是属性值的笛卡尔积组合（即 SKU 行）。推荐用以下嵌套 reactive 结构：

1. attributes：属性列表，每项含 id、name、values（该属性下的所有可选项数组）
2. skus：SKU 行数据列表，每行是一个对象，键为属性 id，值为选中的选项 valueId 或文本
3. preview：一个计算属性或派生状态，用于实时生成当前 attributes 下的所有合法组合（用于预览或校验）

这样设计后，新增属性、增删属性值、修改某 SKU 的某列值，都能触发视图自动更新。

动态添加/删除属性与值

属性和值本身是独立可编辑的维度，操作需保证响应式穿透：

1. 添加新属性：直接往 attributes.push({ id: genId(), name: '新属性', values: [] })
2. 给某属性添加值：定位到对应 attribute，attr.values.push({ id: genId(), text: 'XX' })
3. 删除属性值：用 attr.values.splice(index, 1) —— 注意不能用 filter 替代，否则会丢失响应式连接
4. 删除整个属性：先从 attributes 中移除，再清理所有 skus 中关联该 id 的字段（避免残留）

SKU 行的动态生成与维护

SKU 行不是静态配置，而是由 attributes 实时推导出的组合结果。但实际业务中常允许用户手动增删行、编辑单个单元格：

1. 初始化 SKU 行：遍历 preview（笛卡尔积结果），为每组生成一条 { attrId1: valueId1, attrId2: valueId2, ... } 对象，并 push 到 skus
2. 手动新增一行：push 一个空对象，字段键为各 attribute.id，初始值可设为 null 或第一个 value.id
3. 编辑某单元格：直接赋值，如 sku[attrId] = newValueId，无需额外 trigger，reactive 自动捕获
4. 校验完整性：监听 skus 变化，检查每行是否填满所有属性；缺失时可高亮或禁用保存

避免常见陷阱

reactive 对数组索引赋值（如 arr[0] = newItem）不会触发更新，对对象新增属性（如 obj.newKey = val）在 Vue3 中默认支持，但仍有边界情况：

1. 不要用 skus.length = 0 清空数组，应使用 skus.splice(0) 或 skus.length && skus.pop() 循环清空
2. 不要直接替换整个 skus 数组（如 skus = newArray），必须通过 .push、.splice 等原生数组方法操作
3. 如果属性值是复杂对象（如带图片 URL 的选项），确保其本身也是 reactive 或 ref 包裹，否则深层变更不响应
4. 大量 SKU 时（>100 行），考虑用虚拟滚动或分页，避免一次性渲染导致卡顿