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

在 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 应用时的核心工具。