在 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
4. 避免重复计算和优化性能
- 计算属性可以缓存复杂的计算结果,避免在不必要的时候重新计算。例如,如果计算内容是一个大量数据的过滤或排序操作,使用计算属性可以减少性能开销。
3. 计算属性 vs. 方法 vs. 侦听器
- 计算属性:具有缓存机制,只有当依赖的数据发生变化时才会重新计算,适用于数据依赖的动态展示。
- 方法(methods):每次调用都会重新计算,因此不具备缓存特性。适用于不依赖数据的、仅在用户触发时才执行的逻辑。
- 侦听器(watch):适用于监听数据变化并触发副作用,例如数据提交、API 请求等。
总结
计算属性在 Vue 3 中是一种强大的工具,特别适合用于基于响应式数据的逻辑计算、动态显示、条件控制等场景。相比其他方法,计算属性的缓存机制可以有效优化性能,是开发 Vue 应用时的核心工具。