Vue3前端开发，computed计算属性的基础练习

Vue3前端开发，computed计算属性的基础练习！

在新版里面，和传统的vue2一样，计算属性，都是对一些数据运算进行了封装操作。返回结果是一个实时监控的效果。区别在于，写法不同。效果是一样。

下面给大家展示一个简单的案例。

---

如图，自定义一个组件，ComputedDemo.vue。里面有2个按钮，一个增加购物车的货品数量，一个设计减少货物数量。单价我们写死了，固定单价是10元/斤。

我们定义了一个计算属性。叫做：总货价格。每次当我们点击按钮修改货物数量的时候，就会侦听到数据的变化，自动帮我们计算出来新的总货价格。

---

如图，货物数量为4的时候，下面显示了，货款总额是40元。减法也是可以正常实现的。

题外话：

计算属性，不应该参与异步操作，也不应该去产生副作用。副作用，指的是，它不能去修改业务逻辑里面的参数内容。在我们的这个案例里面，计算属性，仅仅只是做一个简单的运算操作。它不能去干扰我们传入的（货物数量）。货物数量的变化，应该交给其他的功能去实现！这不是计算属性应该关心的事情。

---

计算属性，也不应该去修改dom的内容。它的职责是单一的，就是单纯的通过一个逻辑运算，反馈给我们一个结果。就ok了。如果想发生异步操作，或者修改dom等事情，需要交给其他的函数去执行。比如，watch.就是用来侦听数据变化的。我们后面会给出相应的案例。