###
Vue 3 Setup 中使用计算
属性的方法
在
Vue 3 的 `
setup` 函数中，可以利用 Composition API 来定义计算
属性。这使得开发者能够更灵活地处理复杂的逻辑并保持代码清晰。
#### 定义计算
属性
通过 `computed` 函数可以从其他响应式引用创建一个新的只读或可写的计算
属性。当依赖项发生变化时，计算
属性会自动重新求值[^2]。
```
javascript
import { ref, computed } from &#
39;
vue&#
39;;
export default {
setup() {
const num1 = ref(0);
const num2 = ref(0);
// 创建一个只读的计算
属性 total
const total = computed(() => num1
.value + num2
.value);
return {
num1,
num2,
total
};
}
}
```
此段代码展示了如何基于两个数值型的响应式变量 `num1` 和 `num2` 构建一个名为 `total` 的计算
属性，该
属性表示两者的总和[^5]。
对于需要双向绑定的情况，则可以通过提供 getter/setter 形式的函数来实现：
```
javascript
const activeClass = computed({
get: () => store
.state
.activeClass,
set: (value) => store
.commit(&#
39;updateActiveClass&#
39;, value)
});
```
这里展示的是一个更为复杂的情形——将计算
属性与
Vuex Store 结合起来使用，允许设置新值的同时触发相应的副作用操作。
#### 实际应用案例
考虑这样一个例子，在电商网站上动态计算购物车内所有商品的价格总额。每当用户更改数量或其他影响价格的因素时，页面上的总计金额应立即反映出这些变化[^
3]。
```html
<template>
<div>
商品 A 数量：<input v-model="productAQuantity">
单价：${{ productAPrice }}
商品 B 数量：<input v-model="productBQuantity">
单价：${{ productBPrice }}
总计：${{ totalPrice }}
</div>
</template>
<
script>
import { ref, computed } from &#
39;
vue&#
39;;
export default {
setup() {
let productAQuantity = ref(1); // 默认购买一件商品A
let productAPrice = 9
.9;
let productBQuantity = ref(2); // 默认购买两件商品B
let productBPrice = 19
.8;
const totalPrice = computed(() =>
(productAQuantity
.value * productAPrice +
productBQuantity
.value *
productBPrice)
.toFixed(2));
return {
productAQuantity,
productAPrice,
productBQuantity,
productBPrice,
totalPrice
};
},
};
</
script>
```
上述实例说明了如何在一个实际应用场景下运用计算
属性来简化视图层的数据管理逻辑，并确保界面始终反映最新的业务状态[^1]。
扫一扫
1703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
