vue3使用计算属性

在 Vue 3 中，你可以使用 `computed` 函数来创建计算属性。计算属性是一个根据其他响应式数据动态计算得到的值，类似于 Vue 2.x 中的 `computed` 属性。

下面是一个示例，展示了如何在 Vue 3 中使用计算属性：

<template>
  <div>
    <p>原始数据: {{ num }}</p>
    <p>计算属性: {{ doubleNum }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 创建响应式数据
    const data = reactive({
      num: 5,
    });

    // 创建计算属性
    const doubleNum = computed(() => {
      return data.num * 2;
    });

    return {
      num: data.num,
      doubleNum,
    };
  },
};
</script>

在上面的代码中，我们首先导入了 `computed` 和 `reactive` 函数。然后在 `setup` 函数中，我们使用 `reactive` 创建了一个包含 `num` 属性的响应式对象。接下来，我们使用 `computed` 函数创建了一个名为 `doubleNum` 的计算属性，它返回 `num` 的两倍。最后，在返回的对象中，我们将 `num` 和 `doubleNum` 分别暴露出来。

通过这种方式，我们可以在模板中像访问普通的响应式数据一样访问计算属性。

希望这个例子能帮到你！如果还有其他问题，请随时提问。