computed计算属性购物车功能

最新推荐文章于 2023-06-16 21:30:04 发布

辣鸡王八鸭

最新推荐文章于 2023-06-16 21:30:04 发布

阅读量790

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44685781/article/details/105686968

版权

本文深入探讨Vue.js中的Computed属性，对比methods和watch的区别，解释Computed属性如何用于监控自定义变量并实现高效的双向数据绑定。通过购物车案例，演示Computed属性在实际应用中的优势，如缓存依赖和避免重复计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed计算属性用来监控自己定义的变量，该变量不再data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

购物车代码：
checkValue是一个空数组当选中多选框数组就会增加一项
money是数组中每一项的和


<input type="checkbox" v-model="checkValue" :value="item.product_price*item.num">
<span style="color: red">￥{{money}}</span>
        computed:{
            money:function () {
                let sum=0
                for(var i=0;i<this.checkValue.length;i++){
                    sum+=this.checkValue[i];
                }
                return  sum;
            }

    },

因为我本人对computed 和 watch 和methods也没有知道很深所在了解了一下

computed是计算属性，methods是方法，computed是依赖缓存的，只有当依赖发生改变时才会重新弄求值但是方法每次刷新都会运行

计算属性是通过其他变量（可能不止一个）计算得来的另一个属性不用再data里面写不支持异步当compute内有异步操作时无效
watch监听器侦听一个特定的值支持异步
另外，computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。