最近在做一个项目，一个电商移动端项目，在这个项目中，我需要实现一个点击产品详情页面，在商品规格弹出层中点击加入购物车的这样一个效果（不使用ui框架）
商品规格弹出层中，每种商品都有每种的不同规格，所以，这就造成规格种类繁多，难以处理，这个时候，我选择了将每种商品规格的单独抽离出来，作为一个子组件
商品规格图
这样做的好处呢，就是实现点击效果时候，不会造成变量污染，不需要去定义大量的变量来实现点击切换的效果。但是也带来一些小麻烦，下面我将一一列举
1、需要使用比较麻烦的子传父，同时子传父，如果传递的数据是对象或者数组，会导致父组件的视图无法实时更新
关于父组件的视图无法实时更新的bug呢，官方文档有提到一个$set()的api
官方文档$set的介绍
这个方法有三个参数
1、需要修改的对象或者数组
2、需要修改的键名或者数组下标
3、需要修改的值
使用$set()就能解决子传父，导致视图无法实时更新的问题
2、用缓存思想，将每次点击的规格添加到一个缓存对象中，然后再进行加入购物车的时候，会出现，缓存对象会实时变化，并且还有更改购物车数组
将缓存的商品对象追加到购物车数组中
这样做的坏处就在于，购物车数组中的数据会被莫名其妙的修改，而这个被修改的原因就在于，商品的缓存对象是复杂数据类型，保存的只是一个内存地址，一旦缓存对象追加到购物车数组中，就会造成购物车数组的更改，例如：一开始添加苹果这个商品对象进购物车数组，然后再进行一次添加，将缓存中的橘子对象添加进购物车，那么这个时候，购物车的商品就全部成来你后来添加进来的商品对象（即橘子）
那么遇到这种情况的原因我们已经找到来，就是引用类型的赋值以及缓存对象实时更新造成的问题，解决方法很简单，在添加进购物车数组前，将商品对象深拷贝一遍，然后再将深拷贝的对象添加进购物车数组中
