关于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 计算~

1
0

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程