vue中computed的使用场景举例

原创已于 2022-08-24 12:15:24 修改 · 832 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-24 11:46:33 首次发布

vue学习专栏收录该内容

16 篇文章

订阅专栏

本文通过一个Vue.js的例子展示了computed属性如何自动响应数据变化并实时更新视图。当输入框中的姓和名发生变化时，全名会自动更新。同时，以购物车为例，说明了在计算商品总价和处理支付逻辑时，如何利用computed属性避免手动调用方法，简化代码并保持数据的实时同步。此外，还提供了实际的购物车计算代码，包括商品总价和应付金额的计算。

最新学习vue在对computed的使用场景不是特别明白，直到看到这个例子。

当我修改第一行和第二行时，第三行就会发生改变。

改变前：
在这里插入图片描述
改变后：

代码：

<form id="app" action="">
    <div>
        <label>姓
            <input type="text" placeholder="请输入你的姓" v-model="xing">
        </label>
    </div>
    <div>
        <label>名
            <input type="text" placeholder="请输入你的名" v-model="ming">
        </label>
    </div>
    <div>
        <label>姓名
            <input placeholder="请输入你的姓名" type="text" v-model="fullName">
        </label>
    </div>
</form>

 new Vue({
        el: '#app',
        data: {
            xing: '王',
            ming:'小明'
        },
        computed:{
            fullName(){
                //比如这里添加更多的逻辑操作
                return this.xing+this.ming;
            }
        }
    });

思考总结：

我们知道methods里的方法需要人为主动触发，比如 :click，比如添加了某个商品，需要计算购物车总金额，我们定义这个方法为calcuPrice()，如果在methods里定义calcuPrice()就需要我们在所有添加商品的地方onClick时，或者修改商品个数时都要去调用calcuPrice()方法，但如果将calcPrice()放在computed里，只要某个变量发生了变化（比如存放商品的列表list)就会主动触发calcPrice()计算金额。这种情况下computed是不是非常有用！！

下面就是从一个项目里拷贝来的购物车相关代码：

  computed: {
    cartGoods () {
      return this.$store.state.cartGoods;  //state里定义的cardGoods全局变量
    },
    //计算商品总价，这种操作就适合放在computed里面
    amount () {
      let cartGoods = this.$store.state.cartGoods;
      let result = 0;
      cartGoods.forEach(good =>{
        result += good.price * good.count;
      })
      return result;
    },
    //合计
    pay () {
      let result = this.amount - this.redPacket; //总价减去红包金额
      if (result >= 49) {
        this.needPostage = false;
      } else {
        this.needPostage = true;
      }
      if (this.needPostage) {
        result += this.postage;
      }
      return result;
    },
  },