vue3中的计算属性应该怎么用

在 Vue 3 中，计算属性可以使用 `computed` 函数来创建。`computed` 接受一个函数作为参数，这个函数返回的值就是计算属性的值。这个函数可以访问响应式数据，当响应式数据发生变化时，计算属性会自动更新其值。

以下是一个简单的例子：

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Reversed message: {{ reversedMessage }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });

    return {
      message,
      reversedMessage,
    }
  }
}
</script>

在这个例子中，我们创建了一个名为 `message` 的响应式数据，然后使用 `computed` 函数创建了一个计算属性 `reversedMessage`。在 `computed` 函数中，我们访问了 `message` 的值，并对其进行了反转处理。由于 `message` 是响应式数据，当它的值发生变化时，`reversedMessage` 的值也会自动更新。

在模板中，我们直接使用 `message` 和 `reversedMessage` 变量来显示消息和反转后的消息。

需要注意的是，计算属性的值是惰性求值的，即只有在其依赖的响应式数据发生变化时，才会重新计算其值。这有助于提高性能。