先看下项目效果图

这次做这个项目，发现computed(计算属性)特别好用。这次项目因为总金额、节省、和积分，都是上面点击购买，下面就立即显示商品信息和算出总金额、节省、和积分。这里用计算属性是非常好的，相关数据发生变化就自动更新数据。

上面的商品展示我是把原数组拆分成了两个数组，用的数组的filter()方法进行筛选拆分的。

商品展示随机排序利用的是，数组sort()方法。我是把这个方法绑定到了Vue的beforeMount() 这个钩子函数上面。因为它是数据渲染前的钩子函数，用到这里我觉得比较合适。它把数组随机排序之后，马上就进行数据渲染。

代码如下：

beforeMount() {
	this.goods.sort((a,b) => Math.random() > 0.5 ? -1 : 1);//返回负数  a在前，返回正数  b在前
}

这里就利用随机数，然后返回负数、正数。它就会把数组打乱，就达到了随机排序的效果。

这次最大的收获还是computed(计算属性)，用来处理某些数据的时候是真的方便。大家以后遇到那种数据改变就改变视图的，还有反复，复用的数据，可以考虑一下它。

它带一个缓存功能，复用数据直接从缓存取出来，可以提升性能。