在 Vue 3 中，如何使用 `computed` 属性来创建响应式的方法？

在 Vue 3 中，computed 属性用于创建基于它们的响应式依赖进行缓存的计算属性。这意味着只有当计算属性依赖的响应式数据发生变化时，计算属性才会重新计算。这与方法不同，方法每次被调用时都会执行。

要使用 computed 属性来创建响应式的方法，你可以在 setup 函数中定义一个 computed 属性，它接收一个 getter 函数。这个 getter 函数可以返回任何类型的值，包括调用其他方法或执行复杂计算的结果。

以下是如何在 Vue 3 的 <script setup> 语法中使用 computed 属性的示例：

<script setup>
import { ref, computed } from 'vue';

// 定义一个响应式引用
const number = ref(1);

// 创建一个计算属性，它依赖于响应式引用 'number'
const doubled = computed(() => number.value * 2);

// 创建一个计算属性，它依赖于另一个计算属性
const squared = computed(() => doubled.value * doubled.value);

// 你还可以在计算属性中调用方法
function sum(a, b) {
  return a + b;
}

const total = computed(() => sum(number.value, 5));
</script>

<template>
  <div>
    <p>Number: {{ number }}</p>
    <p>Doubled: {{ doubled }}</p>
    <p>Squared: {{ squared }}</p>
    <p>Total: {{ total }}</p>
  </div>
</template>

在这个例子中，我们定义了三个计算属性：

• doubled 依赖于响应式引用 number 并返回它的两倍。
• squared 依赖于 doubled 并返回它的平方。
• total 依赖于 number 并返回 number 与 5 的和。

计算属性是惰性的，只有在它们的依赖项发生变化时才会重新计算。这使得它们非常适合用于执行昂贵的计算或需要根据响应式数据变化而更新的 UI 显示。

注意，计算属性默认是只读的。如果你需要使计算属性可写，可以提供一个 set 函数。但是，通常建议避免使计算属性可写，因为这可能会导致数据流难以追踪和维护。如果确实需要可写的计算属性，应该仔细考虑数据流和组件的状态管理策略。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情