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

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

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

---

<script setup>
import {ref} from 'vue'
import {computed} from 'vue'

const product_count = ref(0)
const totalPrice = computed(
    ()=>{    
        return  product_count.value *10
        
    }
)
const addCount=()=>{
    product_count.value++
}
const subCount= ()=>{
    product_count.value--
}
</script>
<template>
    <p>当前草莓单价:10元/斤</p>
    <p>购物车数量:{{ product_count  }}</p>
    <button @click="addCount">+1</button>
    <hr />
    <button @click="subCount">-1</button>
    <p>货款总额:{{ totalPrice }}</p>
</template>

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

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

---

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

题外话：

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

---

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