Vue3中 你不知道的那些事！！！

前言

今天在写项目中的一个小组件，感觉挺不错的，然后分享给大家，如果以后需要使用这个就，看一下这个博客就行

先说一下SKU和SPU的概念：

• SPU（Standard Product Unit）标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。
• SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。
  

SPU：代表一种商品，拥有很多相同的属性。
SKU：代表的是改商品可选择的规格的任意的组合，他是库存单位的唯一标识

比如在这个下图中出现的使用场景

思路

• 从后端获取到所有带有SKU的组合的列表数据，找到有库存的SKU的列表，下面是有库存的SKU

[蓝色，中国，10cm]
[绿色，中国，20cm]
[蓝色，日本，30cm]
[黑色，日本，30cm]

然后计算SKU集合的笛卡尔集，得到后面的这个值，如下面的代码：

[蓝色，中国，10cm]--->[蓝色，中国，10cm,蓝色#中国，蓝色#10cm,中国#10cm,蓝色#中国#10cm]
[绿色，中国，20cm]--->[绿色，中国，20cm,绿色#中国，绿色#20cm,中国#20cm,绿色#中国#20cm]
[蓝色，日本，30cm]--->[蓝色，日本，30cm,蓝色#日本，蓝色#30cm,日本#30cm,蓝色#日本#30cm]
[黑色，日本，30cm]--->[黑色，日本，30cm,黑色#日本，黑色#30cm,日本#30cm,黑色#日本#30cm]

然后生成一个专用的路径的字典，如下代码

const dic = {
   
  //如果出现了两次的话，就写两个skuId
  '蓝色':[skuId,skuId], 
  '中国'：[skuId],
  蓝色#中国#10cm:[skuId]
  蓝色#中国:[skuId]
}

开始啦

在goods/components文件夹中新建一个goods-sku.vue的文件

基础布局代码，如下

<template>
  <div class="goods-sku">
    <dl>
      <dt>颜色</dt>
      <dd>
        <img class="selected" src="https://yanxuan-item.nosdn.127.net/d77c1f9347d06565a05e606bd4f949e0.png" alt="">
        <img class="disabled" src="https://yanxuan-item.nosdn.127.net/d77c1f9347d06565a05e606bd4f949e0.png" alt="">
      </dd>
    </dl>
    <dl>
      <dt>尺寸</dt>
      <dd>
        <span class="disabled">10英寸</span>
        <span class="selected">20英寸</span>
        <span>30英寸</span>
      </dd>
    </dl>
    <dl>
      <dt>版本</dt