一、架构设计原理

基于笛卡尔积算法+虚拟DOM优化+规格状态机的SKU选择器，支持1000+规格组合秒级渲染

二、核心功能实现

1. 规格组合算法

// 计算笛卡尔积
function cartesianProduct(specs) {
  return specs.reduce((acc, current) => {
    const ret = []
    acc.forEach(a => {
      current.values.forEach(v => {
        ret.push([...a, {specId: current.id, valueId: v.id}])
      })
    })
    return ret
  }, [[]])
}

// 生成有效SKU组合
function generateValidCombinations(specs, skus) {
  const allCombinations = cartesianProduct(specs)
  return allCombinations.filter(comb => {
    return skus.some(sku => {
      return comb.every(c => 
        sku.specs.some(s => 
          s.specId === c.specId && s.valueId === c.valueId
        )
      )
    })
  })
}

2. 组件核心逻辑

Vue.component('sku-selector', {
  props: ['specs', 'skus'],
  data() {
    return {
      selected: {},
      validCombinations: []
    }
  },
  computed: {
    disabledStates() {
      // 计算不可选状态
      const states = {}
      this.specs.forEach(spec => {
        spec.values.forEach(value => {
          const tempSelected = {...this.selected, [spec.id]: value.id}
          states[`${spec.id}_${value.id}`] = !this.isCombinationValid(tempSelected)
        })
      })
      return states
    }
  },
  methods: {
    isCombinationValid(selected) {
      return this.validCombinations.some(comb => {
        return Object.entries(selected).every(([specId, valueId]) => 
          comb.some(c => c.specId == specId && c.valueId == valueId)
        )
      })
    },
    selectSpec(specId, valueId) {
      this.$set(this.selected, specId, valueId)
      this.$emit('change', this.selected)
    }
  },
  created() {
    this.validCombinations = generateValidCombinations(this.specs, this.skus)
  }
})

3. 性能优化方案

• 计算缓存：记忆函数减少重复计算
• 虚拟滚动：超多规格时优化渲染
• 分批处理：大数据量分片计算
• DOM复用：v-for使用key优化