翻译：Vue 计算属性的良好实践

原文地址：Good practices for Vue Computed Properties

计算属性是 Vue 中的一个强大功能，允许您根据响应式状态动态推导和转换数据。当正确使用时，它们可以使您的代码更简洁、更高效、更易于维护。然而，不当的使用可能会导致意外的错误和性能问题。

在这篇文章中，我们将介绍在 Vue 中使用计算属性的良规，确保您能充分利用它们:)

Enjoy！

🤔什么是计算属性？

计算属性是 Vue 中的特殊属性，当它们的依赖项发生变化时自动更新。与方法不同，它们在依赖项变化之前被缓存，这使得它们成为派生状态的效率选择。

让我们看看以下基本示例：

vue

<script setup lang="ts">
import { computed, ref } 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>

这里， fullName 在 firstName 或 lastName 发生变化时自动更新，无需手动重新计算。

计算属性的良好实践

正如我们已了解 Vue 计算属性是什么，现在让我们深入了解一些良好实践。

1. 使用计算属性进行派生状态

避免使用计算属性直接操作或设置状态。相反，保留它们用于基于现有状态的计算或转换。

GOOD:

const cartItems = ref([{ price: 10 }, { price: 15 }]);
const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price, 0));

BAD:

const cartItems = ref([]);
const addItem = computed(() => item => cartItems.value.push(item));
// Use a method for state modification instead

2. 避免计算属性中的副作用

计算属性应保持纯净且无副作用。这确保它们是可预测的，并且仅用于计算值。

GOOD:

const items = ref([1, 2, 3]);
const doubledItems = computed(() => items.value.map(item => item * 2));

BAD:

const items = ref([1, 2, 3]);
const doubledItems = computed(() => {
    console.log('Doubled items calculated'); // Side effect
    return items.value.map(item => item * 2);
});

3. 缓存昂贵计算

计算属性的主要优点之一是其缓存机制。利用这一点进行昂贵计算，以避免不必要的重新计算。

const largeData = ref([...Array.from({ length: 1000000 }).keys()]);
const sum = computed(() => largeData.value.reduce((a, b) => a + b, 0));

4. 为双向计算属性使用 getter 和 setter

当你需要一个既可以计算属性也可以设置值的属性时，请使用 getter 和 setter。这对于影响其他响应式数据的派生状态非常有用。

vue

<script setup lang="ts">
import { computed, ref } 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 组件！

请注意，下次再见！

And happy coding as always 🖥️

翻译：Vue 计算属性的良好实践

评论区