关于selectFoods设计为计算属性
来源:17-17 cartcontrol组件(3)

布雷布雷
2017-05-08
老师,我觉得把selectFoods设计为计算属性不太好
因为,每次点击cartControl的按钮,都会触发food.count的变化
而selectFoods设计为计算属性,依赖每一个food的food.count属性,当不管是哪一个food的food.count变化时候,都会重新计算selectFoods
那么首先,这个监听网络非常庞大,这会不会影响效率呢?
第二,我们只是期望知道是不是选择了这个food,也就是从0到1,之后再增加食物的food.count真的没必要再计算一次selectFoods这个属性了(每次计算都要一个两层遍历,太恐怖了),效率不高。
所以,我觉得不如将selectFoods设计成一个简单的data,然后,从cartControl往外发散事件,choiceFood,removeFood事件,当food.count不存在或者为0,发散choiceFood,当food.count减少到0,发散removeFood
// goods.vue selectFood (food) { this.selectFoods.push(food); console.log(this.selectFoods); }, removeFood (food) { this.selectFoods.splice(this.selectFoods.findIndex(function (value) { return value === food; }), 1); } // cartControl.vue methods: { addCart (event) { if (!event._constructed) { return; } // 防止多次被点击 if (!this.food.count) { Vue.set(this.food, 'count', 1); this.$emit('choiceFood', this.food); } else { this.food.count++; } }, decreaseCart () { if (!event._constructed) { return; } if (this.food.count) { this.food.count--; if (this.food.count === 0) { this.$emit('removeFood', this.food); } } } }
在父组件监听事件来给selectFoods添加或者移除对应的food对象
写回答
1回答
-
ustbhuangyi
2017-05-09
言之有理,2层循环确实会有一定性能的损耗,有一定优化空间,确实之后再增加食物的food.count 也不需要重新计算 selectedFood 了,这个建议很赞。
关于性能,即使用了计算属性也不会带来明显的性能问题,因为数据没有很多所以运算量不大~ 一般前端的性能问题是大量 dom 操作或者是非常复杂的 js 计算~10
相似问题