计算属性是 Vue 中的一个强大功能，它允许你根据响应式状态动态地转换数据。正确使用时，它们可以使你的代码更简洁、更高效、更易于维护。
在本文中，我们将介绍如何在 Vue 中使用计算属性，确保你能够充分发挥它们的优势。
🤔 什么是计算属性？
计算属性是 Vue 中的特殊属性，当它们的依赖项发生变化时，会自动更新。与方法不同，它们在依赖项发生变化之前是缓存的，这使得它们成为派生状态的高效选择。
让我们来看一个基本示例：
<script setup>
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>
<template>
<div>
<p>Full Name: {{ fullName }}</p>
</div>
</template>
在这里，当 firstName 或 lastName 发生变化时，fullName 会自动更新，无需手动重新计算。
🟢 计算属性的良好实践
既然我们已经了解了 Vue 计算属性是什么，现在让我们深入探讨良好实践。
1. 将计算属性用于派生状态
避免使用计算属性直接操作或设置状态。相反，将它们保留用于基于现有状态的计算或转换。
使用示例：
const cartItems = ref([{ price: 10 }, { price: 15 }]);
const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price, 0));
避免示例：
const cartItems = ref([]);
const addItem = computed(() => (item) => cartItems.value.push(item));
// 使用方法来修改状态
2. 避免在计算属性中产生副作用
计算属性应保持纯函数，避免产生副作用。这确保了它们的可预测性，并且仅用于计算值。
使用示例：
const items = ref([1, 2, 3]);
const doubledItems = computed(() => items.value.map(item => item * 2));
避免示例：
const items = ref([1, 2, 3]);
const doubledItems = computed(() => {
console.log('Doubled items calculated'); // 副作用
return items.value.map(item => item * 2);
});
3. 缓存高成本计算
计算属性的主要好处之一是它们的缓存机制。利用这一点来避免不必要的重新计算，特别是对于高成本的计算。
const largeData = ref([...Array(1000000).keys()]);
const sum = computed(() => largeData.value.reduce((a, b) => a + b, 0));
4. 使用 getter 和 setter 实现双向计算属性
当你需要一个可以设置值的计算属性时，使用 getter 和 setter。
<script setup>
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({
get: () => `${firstName.value} ${lastName.value}`,
set: (newValue) => {
const [first, last] = newValue.split(' ');
firstName.value = first;
lastName.value = last;
}
});
</script>
<template>
<input v-model="fullName" />
<p>Full Name: {{ fullName }}</p>
</template>
5. 分解复杂的计算属性
为了提高可读性和可维护性，避免过于复杂的计算属性。如有必要，将它们分解为更小、可复用的部分。
const basePrice = ref(100);
const tax = ref(0.1);
const priceWithTax = computed(() => basePrice.value * (1 + tax.value));
const formattedPrice = computed(() => `$${priceWithTax.value.toFixed(2)}`);
✅ 总结
计算属性是 Vue 中管理派生状态的重要工具。通过遵循最佳实践，例如避免副作用、利用缓存以及分解复杂逻辑，你可以确保你的应用程序保持高性能和可维护性。
今天就开始应用这些技巧，编写更简洁、更健壮的 Vue 组件！
