关于selectFoods设计为计算属性

Question

老师，我觉得把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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

// 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对象

Answer 1

ustbhuangyi 2017-05-09 02:14:58

言之有理，2层循环确实会有一定性能的损耗，有一定优化空间，确实之后再增加食物的food.count 也不需要重新计算 selectedFood 了，这个建议很赞。
关于性能，即使用了计算属性也不会带来明显的性能问题，因为数据没有很多所以运算量不大~ 一般前端的性能问题是大量 dom 操作或者是非常复杂的 js 计算~