vue3怎么使用computed

在 Vue3 中，使用 `computed` 非常简单，你可以在 setup 函数中使用 `computed` 函数来创建计算属性。以下是一个简单的例子：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello Vue!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    function reverseMessage() {
      message.value = message.value.split('').reverse().join('')
    }

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

在上面的例子中，我们使用 `ref` 函数创建一个响应式数据 `message`，并使用 `computed` 函数创建一个计算属性 `reversedMessage`。`reversedMessage` 的值会根据 `message` 的值实时更新。

你可以像使用普通的数据一样使用 `computed` 函数返回的值。在模板中，我们展示了 `message` 和 `reversedMessage` 的值，并在点击按钮时调用了 `reverseMessage` 方法来更新 `message` 的值。