当前位置：首页 > news >正文

vue3中计算属性的用法以及使用场景

news 2025/6/29 6:33:49

在 Vue 3 中，计算属性（computed properties）是一种基于依赖项动态计算并缓存的响应式数据。它与 Vue 2 中的计算属性类似，但在组合式 API 中使用 computed 函数来定义。计算属性的核心优势在于能够自动缓存计算结果，仅在依赖的数据发生变化时重新计算，避免了重复计算和性能浪费。

1. 计算属性的用法

基本用法

在组合式 API 中，可以通过 computed 函数创建计算属性。computed 接受一个回调函数作为参数，回调函数的返回值会成为计算属性的值。

import { ref, computed } from 'vue';const count = ref(1);
const doubleCount = computed(() => count.value * 2);console.log(doubleCount.value); // 输出：2
count.value = 2;
console.log(doubleCount.value); // 输出：4

可写计算属性

计算属性默认是只读的，但也可以定义一个可写的计算属性，允许通过 set 函数改变其值。可写计算属性接受一个对象形式的参数，该对象包含 get 和 set 函数。

const count = ref(1);
const doubleCount = computed({get: () => count.value * 2,set: (newValue) => {count.value = newValue / 2;}
});doubleCount.value = 10; // 触发 setter，count.value 会被设为 5
console.log(count.value); // 输出：5

2. 计算属性的使用场景

1. 数据依赖的逻辑处理

计算属性常用于处理基于多个响应式数据的复杂计算逻辑。例如在电商购物车中，可以用计算属性计算商品的总价、折扣价格、优惠数量等。

const cartItems = ref([{ name: 'Product A', price: 100, quantity: 2 },{ name: 'Product B', price: 50, quantity: 3 },
]);const totalPrice = computed(() =>cartItems.value.reduce((total, item) => total + item.price * item.quantity, 0)
);console.log(totalPrice.value); // 输出：350

2. 表单中的动态显示数据

计算属性在动态表单中也很常用。例如在用户填写信息时，显示实时计算的表单反馈（例如字数统计、动态预览等）。

const firstName = ref('');
const lastName = ref('');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);firstName.value = 'John';
lastName.value = 'Doe';
console.log(fullName.value); // 输出：'John Doe'

3. 条件和状态的控制

计算属性可以用于处理复杂的状态和条件。例如在页面上根据多个条件计算出是否显示某个按钮、图标或提示。

const isLoggedIn = ref(true);
const hasAdminRights = ref(false);const canAccessSettings = computed(() => isLoggedIn.value && hasAdminRights.value);
console.log(canAccessSettings.value); // 输出：false