computed 在vue3里边怎么使用

在 Vue 3 中，`computed` 的使用方式与 Vue 2 中略有不同。

Vue 3 中，我们需要使用 `ref` 或 `reactive` 创建响应式数据，然后使用 `computed` 创建计算属性。下面是一个示例：

<template>
  <div>
    <p>输入框中的文本：{{ text }}</p>
    <p>文本的长度：{{ textLength }}</p>
    <input type="text" v-model="text" />
  </div>
</template>

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

export default {
  setup() {
    const text = ref('')
    const textLength = computed(() => {
      return text.value.length
    })

    return {
      text,
      textLength
    }
  }
}
</script>

在上面的代码中，我们使用 `ref` 创建了一个响应式数据 `text`，然后使用 `computed` 创建了一个计算属性 `textLength`，计算属性的值为 `text.value.length`，也就是 `text` 中字符的个数。最后，在 `setup` 函数中返回 `text` 和 `textLength`。

在模板中，我们可以像使用普通的数据一样使用 `text` 和 `textLength`，它们会自动更新。当 `text` 的值发生改变时，`textLength` 的值也会随之更新。