Vue 3 学习笔记：Vue3 中 Computed 的全新用法

在 Vue 3 中，Computed 属性提供了一种强大而灵活的方式来处理派生状态。与 Vue 2 相比，Vue 3 中的 Computed 有了一些全新的用法和改进，让我们来深入探索一下。

Vue 3 中的 Computed 可以使用函数式的方式来定义。这使得代码更加简洁和直观。例如：

import { computed } from 'vue';

const myComputedValue = computed(() => {
  // 复杂的计算逻辑
  return someValue;
});

这种函数式的定义方式让我们能够更清晰地表达计算的过程。

Vue 3 的 Computed 具有更好的类型推导支持。这意味着在使用 TypeScript 时，能够更准确地推断出 Computed 属性的类型，从而减少类型错误和提高代码的可维护性。

另外，新的 Composition API 与 Computed 结合得更加紧密。我们可以在 setup 函数中轻松地使用 Computed 来处理组件的逻辑。

在实际应用中，Computed 常用于根据现有数据计算出派生数据。比如，根据一个商品的原价和折扣率计算出折扣后的价格。

const originalPrice = ref(100);
const discountRate = ref(0.8);

const discountedPrice = computed(() => originalPrice.value * discountRate.value);

这样，当原价或折扣率发生变化时，折扣后的价格会自动更新。

Computed 还可以用于对数据进行格式化和转换。例如，将一个时间戳转换为具体的日期格式。

const timestamp = ref(1635789021);

const formattedDate = computed(() => new Date(timestamp.value).toLocaleString());

Vue 3 中的 Computed 为我们提供了更高效、更灵活的方式来处理派生数据和状态。熟练掌握其全新用法，能够让我们在开发 Vue 3 应用时更加得心应手，写出更加优雅和可维护的代码。通过合理地运用 Computed，我们可以使组件的逻辑更加清晰，提高应用的性能和用户体验。