Vue3前端开发，computed计算属性的基础练习-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3前端开发，computed计算属性的基础练习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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元/斤。

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

Vue3前端开发，computed计算属性的基础练习,VUE3,vue.js,javascript,前端

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

题外话：

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

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

到了这里，关于Vue3前端开发，computed计算属性的基础练习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！