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

原创

馨曦缺 2024-10-31 22:27:58 ©著作权

文章标签 vue.js javascript 前端数据缓存 文章分类 MySQL 数据库

©著作权归作者所有：来自51CTO博客作者馨曦缺的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 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