vue3 computed如何使用

在Vue 3中，computed属性的使用方式与Vue 2有一些不同。在Vue 3中，你可以使用`computed`函数来创建计算属性。

首先，你需要导入`computed`函数：

import { computed } from 'vue';

然后，你可以在组件的`setup`函数中使用`computed`函数来创建计算属性。计算属性可以接收一个getter函数作为参数，并返回一个响应式的计算值。

下面是一个示例：

import { computed } from 'vue';

export default {
  setup() {
    // 创建一个响应式的数据
    const count = ref(0);

    // 创建一个计算属性
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    return {
      count,
      doubleCount
    };
  }
}

在上面的示例中，我们创建了一个响应式的数据`count`，然后使用`computed`函数创建了一个计算属性`doubleCount`，它的值是`count`的两倍。

在模板中，你可以像使用普通的响应式数据一样使用计算属性：

<template>
  <div>
    Count: {{ count }}
    Double Count: {{ doubleCount }}
  </div>
</template>

这样，每当`count`的值发生变化时，`doubleCount`也会自动更新。