关于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

    // 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 计算~