用 reactive 管理商品规格参数表格需将行列均设计为可响应式增删改的结构化对象，核心结构包括 attributes（属性列表）、skus（SKU 行数据）和 preview（笛卡尔积组合），支持动态增删属性/值、实时编辑与校验。
用 reactive 维护商品规格参数表格的动态行列数据，核心在于把“行”和“列”都当作可响应式增删改的结构化对象来管理，而不是硬编码固定字段。它适合处理规格组合爆炸（如颜色×尺寸×材质）、用户随时新增属性或值、以及需要实时联动校验的场景。
规格表格的数据结构设计
商品规格参数表本质是二维结构：横向是属性（如“颜色”“尺寸”），纵向是具体取值（如“红色”“XL”），而最终生成的是属性值的笛卡尔积组合（即 SKU 行）。推荐用以下嵌套 reactive 结构：
-
attributes：属性列表，每项含
id、name、values（该属性下的所有可选项数组） -
skus：SKU 行数据列表，每行是一个对象，键为属性
id，值为选中的选项valueId或文本 - preview：一个计算属性或派生状态，用于实时生成当前 attributes 下的所有合法组合（用于预览或校验）
这样设计后，新增属性、增删属性值、修改某 SKU 的某列值，都能触发视图自动更新。
动态添加/删除属性与值
属性和值本身是独立可编辑的维度，操作需保证响应式穿透：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“前端免费学习笔记（深入）”；
- 添加新属性：直接往
attributes.push({ id: genId(), name: '新属性', values: [] }) - 给某属性添加值：定位到对应 attribute，
attr.values.push({ id: genId(), text: 'XX' }) - 删除属性值：用
attr.values.splice(index, 1)—— 注意不能用filter替代，否则会丢失响应式连接 - 删除整个属性：先从
attributes中移除，再清理所有skus中关联该id的字段（避免残留）
SKU 行的动态生成与维护
SKU 行不是静态配置，而是由 attributes 实时推导出的组合结果。但实际业务中常允许用户手动增删行、编辑单个单元格：
- 初始化 SKU 行：遍历
preview（笛卡尔积结果），为每组生成一条{ attrId1: valueId1, attrId2: valueId2, ... }对象，并 push 到skus - 手动新增一行：push 一个空对象，字段键为各
attribute.id，初始值可设为null或第一个value.id - 编辑某单元格：直接赋值，如
sku[attrId] = newValueId，无需额外 trigger，reactive 自动捕获 - 校验完整性：监听
skus变化，检查每行是否填满所有属性；缺失时可高亮或禁用保存
避免常见陷阱
reactive 对数组索引赋值（如 arr[0] = newItem）不会触发更新，对对象新增属性（如 obj.newKey = val）在 Vue3 中默认支持，但仍有边界情况：
- 不要用
skus.length = 0清空数组，应使用skus.splice(0)或skus.length && skus.pop()循环清空 - 不要直接替换整个
skus数组（如skus = newArray），必须通过.push、.splice等原生数组方法操作 - 如果属性值是复杂对象（如带图片 URL 的选项），确保其本身也是 reactive 或 ref 包裹，否则深层变更不响应
- 大量 SKU 时（>100 行），考虑用虚拟滚动或分页，避免一次性渲染导致卡顿
