目录
一：介绍
在 Vue.js 中，computed 属性是一种特殊类型的属性，它允许你声明依赖于其他数据属性的值。computed 属性的值是通过一个函数计算得出的，这个函数可以在其依赖的数据发生变化时重新计算。这使得 computed 属性成为响应式的，并且可以缓存它们的值，只有在其依赖的数据发生改变时才会重新计算。
computed 属性非常适合于执行复杂逻辑或者数据转换，并且你希望缓存结果以提高性能。与在模板内使用复杂表达式不同，使用 computed 属性可以使模板代码更清晰和易于维护。
下面是一个简单的 Vue 组件示例，展示了如何使用 computed 属性：
二：例子演示
<template>
<div>
<input v-model.number="price" type="number" placeholder="输入价格">
<input v-model.number="quantity" type="number" placeholder="输入数量">
<select v-model="taxRate">
<option value="0.05">5%</option>
<option value="0.1">10%</option>
<option value="0.15">15%</option>
<option value="0.2">20%</option>
</select>
<p>总价（不含税）: { { subtotal }}</p>
<p>税费: { { tax }}</p>
<p>总价（含税）: { { total }}</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 0, // 商品价格
quantity: 0, // 商品数量
taxRate: 0.05 // 税率，默认为 5%
};
},
computed: {
subtotal() {
// 计算商品总价（不含税）
return this.price * this.quantity;
},
tax() {
// 计算税费
return this.subtotal * this.taxRate;
},
total() {
// 计算总价（含税）
// 这里我们直接依赖于 subtotal 和 tax，当它们任何一个变化时，total 都会重新计算
return this.subtotal + this.tax;
}
}
};
</script>
在这个例子中，我们有一个简单的购物车商品计算场景。用户可以输入商品的价格和数量，以及选择一个税率。我们定义了三个 computed 属性：
subtotal：计算商品的总价（不含税），它依赖于 price 和 quantity 数据属性。
tax：计算税费，它依赖于 subtotal 和 taxRate 数据属性。注意，尽管 tax 没有直接依赖于 price 和 quantity，但由于它依赖于 subtotal，当 price 或 quantity 变化时，tax 也会重新计算。
total：计算总价（含税），它直接依赖于 subtotal 和 tax。
这个例子展示了 computed 属性的一个关键特点：它们是缓存的，并且只有当它们依赖的数据属性发生变化时才会重新计算。在这个例子中，如果你改变 price 或 quantity，所有相关的 computed 属性（subtotal、tax 和 total）都会自动更新，而不需要额外的代码来触发这些更新。这使得 computed 属性非常适合处理复杂的、需要响应式更新的逻辑。
