vue3computed计算属性

Vue 3 中的计算属性与 Vue 2 中的计算属性略有不同。在 Vue 3 中，计算属性被称为 "computed"，它们使用 `computed` 函数来定义。

下面是一个使用 Vue 3 的 computed 的示例：

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => {
      return count.value * 2;
    });

    return {
      count,
      doubleCount,
    };
  },
};

在这个示例中，我们使用了 `ref` 函数来创建一个响应式数据 `count`，然后使用 `computed` 函数创建了一个计算属性 `doubleCount`。这个计算属性是通过将 `count` 的值乘以 2 来计算得到的。

在模板中使用计算属性很简单，只需像访问普通的响应式数据一样访问它们即可：

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

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

需要注意的是，Vue 3 的计算属性必须使用 `computed` 函数来定义，而不是像 Vue 2 中那样使用 `computed` 关键字。