vue3中的computed函数：方便计算属性的使用
Vue.js是目前广受欢迎的JavaScript框架之一。其模板语法、数据绑定、组件化等特性使得Vue.js在前端开发中得到越来越广泛的应用。在Vue.js中，computed函数是一个非常实用的特性，它可以帮助我们简化代码，减少重复计算，提高代码的性能和可读性。针对Vue.js 3.x版本，本文将详细介绍computed函数的使用方法及其优势。
一、computed函数的定义与基本用法
computed函数是一个Vue.js中非常实用的特性，可以帮助我们根据模板中使用的表达式自动计算值并返回结果。和methods方法不同，computed函数不仅可以调用已定义的方法，还可以直接从数据属性中获取值，而且computed只有在它依赖的属性值发生变化时才会重新计算。
在Vue.js 3.x版本中，我们可以通过在组件中添加一个computed对象来定义计算属性。比如，在一个组件中我们需要计算商品的总价，代码如下：
立即学习“前端免费学习笔记（深入）”；
<template>
<div>
<p>商品价格：{{price}} 元</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10786" title="新快购物系统"><img
src="https://img.php.cn/upload/webcode/000/000/003/176373900197726.jpg" alt="新快购物系统" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10786" title="新快购物系统">新快购物系统</a>
<p>新快购物系统是集合目前网络所有购物系统为参考而开发，不管从速度还是安全我们都努力做到最好，此版虽为免费版但是功能齐全，无任何错误，特点有：专业的、全面的电子商务解决方案，使您可以轻松实现网上销售；自助式开放性的数据平台，为您提供充满个性化的设计空间；功能全面、操作简单的远程管理系统，让您在家中也可实现正常销售管理；严谨实用的全新商品数据库，便于查询搜索您的商品。</p>
</div>
<a href="/xiazai/code/10786" title="新快购物系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>商品数量：{{amount}}</p>
<p>商品总价：{{totalPrice}} 元</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 10,
amount: 2
}
},
computed: {
totalPrice() {
return this.price * this.amount;
}
}
}
</script>在上面的代码中，我们定义了一个computed对象，其中包含了一个totalPrice的计算属性。在模板中，我们可以直接使用{{totalPrice}}来展示商品的总价。此时，totalPrice会自动计算price和amount的乘积，并将结果返回给模板。
二、computed函数的特性
1、计算属性是有缓存的
在Vue.js中，computed函数具有缓存的特性。这就意味着，如果computed方法依赖的数据没有发生变化，那么computed方法直接返回缓存的结果，而不是重新计算。这样就可以节省重复的计算，提升代码的性能。比如，我们可以将上面的代码修改为：
<template>
<div>
<p>商品价格：{{price}} 元</p>
<p>商品数量：{{amount}}</p>
<p>商品总价：{{totalPrice}} 元</p>
<p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 10,
amount: 2
}
},
computed: {
totalPrice() {
return this.price * this.amount;
},
totalPriceNoCache() {
return this.price * this.amount + Math.random();
}
}
}
</script>在上面的代码中，我们新增了一个totalPriceNoCache计算属性。由于我们使用了一个随机数来干扰计算结果，所以每次计算结果都是不同的。在模板中，我们可以看到totalPrice只计算了一次，而totalPriceNoCache则每次都重新计算。
2、计算属性可以依赖其他属性
computed方法计算的结果不仅可以基于当前组件的数据属性，还可以基于其他组件data属性、computed属性、以及props属性等。Vue.js会自动追踪这些依赖关系，并在依赖项发生变化时重新计算computed方法的结果。
比如，下面展示了一个基于其他计算属性的例子：
<template>
<div>
<p>商品价格：{{price}} 元</p>
<p>商品数量：{{amount}}</p>
<p>商品总价：{{totalPrice}} 元</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 10,
amount: 2
}
},
computed: {
totalPrice() {
return this.discount + this.tax;
},
discount() {
return this.price * 0.8;
},
tax() {
return this.price * 0.1;
}
}
}
</script>在上面的代码中，我们定义了三个计算属性：totalPrice、discount和tax。其中，totalPrice的计算依赖于discount和tax两个计算属性。
总结
computed函数是Vue.js中一个非常实用的特性，可以帮助我们根据模板中使用的表达式自动计算值并返回结果。和methods方法不同，computed函数不仅可以调用已定义的方法，还可以直接从数据属性中获取值，而且computed只有在它依赖的属性值发生变化时才会重新计算。在Vue.js 3.x版本中，computed函数具有缓存的特性，可以节省重复的计算、提升代码的性能。同时，computed方法的结果可以基于其他组件的数据属性、computed属性、以及props属性等，Vue.js会自动追踪这些依赖关系，提高代码的可读性和可维护性。
